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

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

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

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

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

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

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

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

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

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

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

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

声明：本文由w3h5原创，转载请注明出处：《Bootstrap滚动监听不用offset实现向下偏移》 https://cloud.tencent.com/developer/article/1538406