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联系。
原创文章,作者:carmelaweatherly,如若转载,请注明出处:https://blog.ytso.com/231160.html