w3h5

Bootstrap滚动监听不用offset实现向下偏移

Bootstrap的滚动监听还不错,可以监听滚动事件,实现导航栏的.active切换。

Bootstrap滚动监听中文文档:http://v3.bootcss.com/javascript/#scrollspy 我就不在此赘述了。

但是我发现一个问题,如果把 nav 用 .navbar-fixed-top 顶部固定,给 body 一个 padding-top: 50px,锚点设置在“微信”和“支付宝”上面,点击或者滚动滑轮,锚点还是以浏览器顶部为准,会被 nav 遮挡。如下图:

Bootstrap滚动监听不用offset实现向下偏移 经验总结 第1张

官方文档给出了一个 data-offset 属性,但是我试了很多次,好像都不管用。

参数:可以通过 data 属性或 JavaScript 传递参数。对于 data 属性,其名称是将参数名附着到 data- 后面组成,例如 data-offset=""。

名称:offset    类型:number    默认值:10    描述:计算滚动位置时相对于顶部的偏移量(像素数)

查了一些资料,也没找到简单的解决方法,应该是使用 offset 需要配合给监控元素设置 height 和 overflow auto

尝试给 锚点 元素添加 Padding-top: 70px,可以解决 nav遮挡问题,但是上边距太大很难看。

Bootstrap滚动监听不用offset实现向下偏移 经验总结 第2张

又尝试给锚点元素添加了一个 margin-top: -50px,结果如下。

Bootstrap滚动监听不用offset实现向下偏移 经验总结 第3张

这个偏移问题困扰了我2、3天,找了很多资料也没有一个好的简单的解决方案。做后想出了这么一个方法,先设置内边距把元素撑开,再设置 margin值缩小元素之间的距离。

如果您还有更好的方法,欢迎评论或者与我QQ联系。

声明:本文由w3h5原创,转载请注明出处:《Bootstrap滚动监听不用offset实现向下偏移》 https://www.w3h5.com/post/29.html

赞 (3)
分享到: +More |

评论 沙发

换个身份