学习Bootstrap滚动监听附调用方法

更新时间：2016年07月02日 13:02:19 投稿：lijiao

这篇文章主要为大家全面解析Bootstrap中滚动监听的使用方法，感兴趣的小伙伴们可以参考一下

本文为大家介绍Bootstrap滚动监听，供大家学习，具体内容如下

滚动监听伴随着滚动条的滚动，列表项被不断切换激活

<!-- id="menu" 为data-target="#menu" 的监听对象-->
<!-- navbar navbar-inner nav navbar-fixed-top 固定导航条 -->
<div id="menu" class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="nav">
      <li><a href="#1">列表1</a></li>
      <li><a href="#2">列表2</a></li>
      <!-- dropdown dropdown-menu 下拉菜单 -->
      <li class="dropdown">
        <!-- data-toggle="dropdown" 调用下拉行为 -->
        <a href="#" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#3">列表3</a></li>
          <li><a href="#4">列表4</a></li>
          <li><a href="#5">列表5</a></li>
        </ul>
      </li>
    </div>
  </div>
</div>
<!-- data-spy="scroll"为监听对象设置data属性 -->
<!-- data-target="#menu"设置监听对象 -->
<!-- data-offset="30"设置偏移量 -->
<div class="scrollspy" data-spy="scroll" data-target="#menu" data-offset="30">
  <h3 id="1">列表1</h3>
  <p><img src="img/1.jpg"></p>
  <h3 id="2">列表2</h3>
  <p><img src="img/2.jpg"></p>
  <h3 id="3">列表3</h3>
  <p><img src="img/3.jpg"></p>
  <h3 id="4">列表4</h3>
  <p><img src="img/4.jpg"></p>
  <h3 id="5">列表5</h3>
  <p><img src="img/5.jpg"></p>
</div>

滚动监听

<body data-spy="scroll" data-target="#navbar" data-offset="0">
<div id="navbar">
  <ul class="nav nav-pills nav-stacked">
    <li><a href="#1">列表1</a></li>
    <li><a href="#2">列表2</a></li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#3">列表3</a></li>
        <li><a href="#4">列表4</a></li>
        <li><a href="#5">列表5</a></li>
      </ul>
    </li>
  </ul>
</div>
<!-- data-spy="scroll"为监听对象设置data属性 -->
<!-- data-target="#menu"设置监听对象 -->
<!-- data-offset="30"设置偏移量 -->
<div class="scrollspy" >
  <h3 id="1">列表1</h3>
  <p><img src="img/1.jpg"></p>
  <h3 id="2">列表2</h3>
  <p><img src="img/2.jpg"></p>
  <h3 id="3">列表3</h3>
  <p><img src="img/3.jpg"></p>
  <h3 id="4">列表4</h3>
  <p><img src="img/4.jpg"></p>
  <h3 id="5">列表5</h3>
  <p><img src="img/5.jpg"></p>
</div>

CSS样式

#navbar {
  position: fixed;
  right: 10px;
  top: 50px;
  width: 200px;
  background-color: #fff;
}

调用：
第一种：使用 data-spy=”scroll”方法，上述就是
第二种：使用JS调用
HTML仅仅去掉data-spy=”scroll”

$(function () {
  $("body").scrollspy();
  // 当一个新导航条的项目被激活时触发
  $("body").on("activate", function (e) {
    if (e.target && $(e.target).hasClass("dropdown")){
      $(e.target).children("ul.dropdown-menu").css("display", "block");
    } else {
      $(e.target).parent().find("ul.dropdown-menu").css("display", "none");
    }
  })
});

如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

您可能感兴趣的文章:

微信小程序实现列表下拉刷新上拉加载
这篇文章主要为大家详细介绍了微信小程序实现列表下拉刷新上拉加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-02-02
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
这篇文章主要介绍了微信小程序BindTap快速连续点击目标页面跳转多次问题处理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
js 自定义的联动下拉框
一直都嫌下拉框这个html控件难看，之前弄了个<div><ul><li></li></ul></div>版的下拉框.
2010-02-02
JavaScript中你不得不知道的Promise高级用法分享
在JavaScript中,Promise是一种解决异步编程问题的重要方式,本文主要来和大家探讨一下23个Promise的高级用法,每一个都在JavaScript的海洋中航行,让开发者们能够以更高效、优雅的方式处理异步操作,希望对大就有所帮助
2023-12-12
JS实现4位随机验证码
这篇文章主要为大家详细介绍了JS实现4位随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
uniapp 动态组件实现Tabs标签切换组件(喜马拉雅app作为案例)
本文以喜马拉雅app作为案例给大家详解讲解uniapp 动态组件实现Tabs标签切换组件功能,在uniapp中实现动态组件切换需看uniapp是否支持,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-10-10
JavaScript随机数的组合问题案例分析
这篇文章主要介绍了JavaScript随机数的组合问题,结合具体案例形式分析了JavaScript随机数的组合问题相关算法原理、实现技巧与注意事项,需要的朋友可以参考下
2020-05-05
JS实现仿Windows经典风格的选项卡Tab切换代码
这篇文章主要介绍了JS实现仿Windows经典风格的选项卡Tab切换代码,涉及JavaScript元素的遍历与样式的修改技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
echarts折线图legend太多与图重叠处理办法
ECharts折线图的Legend（图例）用于展示每条折线所对应的数据系列名称,下面这篇文章主要给大家介绍了关于echarts折线图legend太多与图重叠的处理办法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-02-02
JavaScript undefined及null区别实例解析
这篇文章主要介绍了JavaScript undefined及null区别实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07