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


Posted in Javascript onJuly 02, 2016

本文为大家介绍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程序设计有所帮助。

Javascript 相关文章推荐
解析js原生方法创建表格效率测试
Jul 08 Javascript
让table变成exls的示例代码
Mar 24 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
详解vuex的简单使用
Mar 12 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
JavaScript Ajax编程 应用篇
Jul 02 #Javascript
js跨域资源共享 基础篇
Jul 02 #Javascript
JavaScript数据存储 Cookie篇
Jul 02 #Javascript
JavaScript实现简单的拖动效果
Jul 02 #Javascript
jQuery插件简单学习实例教程
Jul 01 #Javascript
jquery插件autocomplete用法示例
Jul 01 #Javascript
AngularJS 避繁就简的路由
Jul 01 #Javascript
You might like
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
来自phpguru得Php Cache类源码
2010/04/15 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
Python绘制七段数码管实例代码
2017/12/20 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
微观物理专业自荐信
2014/01/26 职场文书
会计专业自我评价
2014/02/12 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
《比尾巴》教学反思
2016/02/24 职场文书