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

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

90c92771d0ded3916d33c0a6de6e1751.png

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

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

...

...

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

引入JS文件:

jQuery(document).ready(function() {

jQuery('.sidebar').theiaStickySidebar({

additionalMarginTop: 30

});

});

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

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

c9ad2f3f4f1e27545f3ba7e8df678759.png

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

可用配置参数及说明:containerSelector:侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。

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

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

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

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

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

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值