Bootstrap教程JS插件滚动监听学习笔记分享

网络编程 2024/11/15 佚名

3 2 1

本文主要来学习一下JavaScript插件--滚动监听。

1、案例

滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。你可以试试滚动这个页面，看看左侧导航的变化。

先把实现的代码上了，你可以通过测试代码先来看看效果。

<!DOCTYPE html>
 <html>
 <head>
 <title>Bootstrap</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 <!--[if lt IE 9]>
 <script src="/UploadFiles/2021-04-02/html5shiv.js">

用法1--通过data属性
通过为需要监听的页面元素（一般是）不过在上面添加在了Div上面，你可以自己看看代码就明白了。然后给div添加属性data-spy="scroll"就可很轻松的为顶部导航条添加滚动监听功能。然后为其添加data-target属性，此属性的值为任何Bootstrap中.nav组件的父元素的ID或class。
复制代码 代码如下: <div data-offset="0" class="scrollspy-example" 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，可以点击这里，继续学习，希望对大家的学习有所帮助，也希望大家继续关注的更多精彩内容。