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联系。

推荐阅读:

利用css中的伪类 给元素设置特殊样式效果

Ueditor后端配置项没有正常加载,上传插件不能正常使用!的解决过程。

找回Windows Server&Windows10 ltsb 图片查看器

jQuery text() html() val()设置内容和attr()设置属性的用法

input[type=file]去掉“未选择任何文件”及样式改进

赞 (5)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)