DDR爱好者之家

Bootstrap教程JS插件滚动监听学习笔记分享
站长资源 2024/11/29 佚名
35 1538
DDR爱好者之家 Design By 杰米

本文主要来学习一下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=""。


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


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，可以点击这里，继续学习，希望对大家的学习有所帮助，也希望大家继续关注的更多精彩内容。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米