Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)

最新推荐文章于 2024-03-26 13:49:09 发布

转载最新推荐文章于 2024-03-26 13:49:09 发布 · 526 阅读

文章标签：

#bootstrap #前端开发

本文介绍Bootstrap3.0中滚动监听插件的使用方法，包括通过data属性和JavaScript两种方式实现滚动监听，以及如何确保导航链接与页面元素正确关联。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)

前言

阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html

本文主要来学习一下JavaScript插件--下拉菜单。

滚动监听

案例

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

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

View Code

然后运行后，在内容下，也就是有滚动条哪里滚动鼠标齿轮，即可看到效果。

用法1--通过data属性

通过为需要监听的页面元素（一般是<body>）不过在上面添加在了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值。例如，<a href="#home">home</a>必须对应DOM中例如<div id="home"></div>。

用法2--通过JavaScript

通过JavaScript启动滚动监听：

    <script type="text/javascript">
      $(function () {
        $('.scrollspy-example').scrollspy({ target:'#navbar-example' });
      })
    </script>

通过将样式类为scrollspy-example的div，去掉它的data-target属性。这样同样可以进行鼠标滚轮的切换。

方法

.scrollspy('refresh')

使用滚动监听插件时，每当页面中从DOM中增加或删除页面元素时，都需要调用此方法以，如下：

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

不过暂时还没用到。

选项

可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-offset=""。

事件

 <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内容一定的高度。

总结

纠结了很久，就是因为针对内容那里没有滚动条。这一点一定记住勒。

本文已更新至Bootstrap3.0入门学习系列导航http://www.cnblogs.com/aehyok/p/3404867.html