通过为需要监听的页面元素（一般是）不过在上面添加在了Div上面，你可以自己看看代码就明白了。然后给div添加属性data-spy="scroll"就可很轻松的为顶部导航条添加滚动监听功能。然后为其添加data-target属性，此属性的值为任何Bootstrap中.nav组件的父元素的ID或class。
复制代码 代码如下:
<div data-offset="0" data-spy="scroll" data-target="#navbar-example">
........
</div>
导航链接地址必须有对应的目标
导航条内的链接地址必须有对应的页面元素具有同样的ID值。
用法2--通过JavaScript
通过JavaScript启动滚动监听：
<script type="text/javascript"> $(function () { $('.scrollspy-example').scrollspy({ target:'#navbar-example' }); }) </script>
通过将样式类为scrollspy-example的div，去掉它的data-target属性。这样同样可以进行鼠标滚轮的切换。
2、方法
.scrollspy('refresh')
使用滚动监听插件时，每当页面中从DOM中增加或删除页面元素时，都需要调用此方法以，如下：
复制代码 代码如下:
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') })
3、选项
可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-offset=""。
4、事件
<script type="text/javascript"> $('#navbar-example').on('activate.bs.scrollspy', function () { alert(1); }) </script>
最后注意:针对滚动监听的内容当然要添加滚动条，也就是要预先添加样式
<style type="text/css"> .scrollspy-example { height: 200px; overflow: auto; position: relative; border:1px solid red; } </style>
给与Div内容一定的高度。
以上就是Bootstrap滚动监听相关内容的学习笔记，如果大家还想继续学习Bootstrap，可以点击这里，继续学习，希望对大家的学习有所帮助，也希望大家继续关注脚本之家的更多精彩内容。
您可能感兴趣的文章: