zblogPHP智能侧边栏跟随固定范围浮动的效果

李洋博客
海外宿主机,香港云主机,租用服务器CN2知名云计算-90IDC

温馨提示:这篇文章已超过1507天没有更新,请注意相关的内容是否还可用!

其实关于主题家这个模板我之前一直在打算找一款插件,可以自动调整右侧的跟随效果,但是苦于没有思路一直没整,前几天网友又反映到这个问题了,于是重新整理查找资料,我记得之前写过一篇“zblogphp侧栏跟随代码教程,看了就会。”的博文,但是这个仅仅针对右侧某个栏目跟随,而且不能判断整体。所以在网上找相关功能,整理之后代码如下:

zblogPHP智能侧边栏跟随固定范围浮动的效果 第1张

先声明,这个不一定会使用所有的网站,如果没有效果,自己多尝试几次吧,我的主题会增加这个功能,无需手动修改。

首先,你的HTML结构应是这样:

<div class="wrapper">
    <div class="content">
        ...
    </div>
    <div class="sidebar">
    ...  
    </div>
</div>

其中“sidebar”就是侧栏智能跟随的容器名称,如果你的博客或者网站不是采用这种框架就得自己慢慢摸索,如果是,那么继续

引入JS文件:

<script type="text/javascript" src="sticky-sidebar.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.sidebar').theiaStickySidebar({
      additionalMarginTop: 30
    });
  });
</script>

其中,“sidebar”,就是想要智能滑动的元素对应的选择器class或id。

还有“additionalMarginTop”值为 30元素,只是侧栏浮动距离网站顶端的距离,我也说不明白了,看图。

zblogPHP智能侧边栏跟随固定范围浮动的效果 第2张

嗯哪,就这如图这样婶儿的!

可用配置参数及说明:

containerSelector:侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。

additionalmarginTop:可选值。指定侧边栏的顶部margin值,单位像素,默认为0像素。

additionalMarginBottom:可选值。指定侧边栏的底部margin值,单位像素,默认为0像素。

updateSidebarHeight:是否更新侧边栏的高度。默认为true。

minWidth:如果侧边栏的宽度小于这个值,将恢复为正常尺寸。默认值为0。(该选项用于响应式设计)

defaultPosition:侧边栏必须是非static的定位方式。默认为relative定位方式。

namespace:绑定事件的命名空间。默认为TSS。

好了,就这样吧,哦对了,还有这个js没给你们,不过,我想你们应该知道怎么下载这个js吧,对的,我的网站上就有啊。哈哈哈,拿走不谢。

不知道的童鞋们点击:传送门

文章版权声明:除非注明,否则均为李洋个人博客原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

zblog利用ip地址物理化插件实现评论显示IP归属地的方法

利用 acme.sh 申请 ZeroSSL 泛域名证书的图文教程

zblog响应式极简图片灯箱插件viewimglee,不足1kb的ViewImage.js超效率

Z-BlogPHP侧栏热门文章和热评文章不显示文章怎么解决

开启CDN后怎么防止流量被恶意盗刷

网站预加载 JS 脚本 instant.page 的使用方法

zbp支付宝即时到帐插件显示 count(): Parameter must be an array or an object 错误的解决办法

Windows下安装和部署SVN服务器且同步到Web站点的图文教程

发表评论

表情:
评论列表 (有 12 条评论,7526人围观)
网友昵称:书法字
书法字 V 铁粉 Google Chrome 55.0.2883.87 Windows 7 x64 6楼
18-05-27 来自上海 回复
这个教程在研究研究,准备用到我的小站上!拿走!
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 7 x64
18-05-28 来自上海 回复
@书法字 修改前记得备份~~~
网友昵称:墨云
墨云 V 铁粉 TheWorld Browser Windows 7 x64 地板
18-04-24 来自广东 回复
这个教程不错,学习了
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 7 x64
18-04-25 来自天津 回复
@墨云 谢谢支持。
网友昵称:侧栏跟随
侧栏跟随 V 铁粉 zBrowser 6.11.2 Android 7.0 凉席
18-04-17 来自上海 回复
文章不错,写的很好!
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 7 x64
18-04-25 来自上海 回复
@侧栏跟随 赞。
网友昵称:新闻头条
新闻头条 V 铁粉 Google Chrome 55.0.2883.87 Windows 7 板凳
18-04-13 来自广东 回复
文章不错非常喜欢
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 7 x64
18-04-13 来自上海 回复
@新闻头条 感谢支持!
网友昵称:王望奎博客
王望奎博客 V 铁粉 Sogou Explorer Windows 7 x64 椅子
18-04-09 来自上海 回复
不错不错,这个教程可以。
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 7 x64
18-04-13 来自上海 回复
@王望奎博客 嗯嗯,可以手动试试,有不懂的留言!
网友昵称:阿里巴巴下拉
阿里巴巴下拉 V 铁粉 Google Chrome 55.0.2883.87 Windows 7 x64 沙发
18-04-08 来自广东 回复
这个效果了以前也是碰到过,我试试看
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 7 x64
18-04-08 来自上海 回复
@阿里巴巴下拉 试试吧,效果很不错啊
取消
微信二维码
微信二维码
支付宝二维码