学习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中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
js实现div在页面拖动效果
May 04 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
js如何验证密码强度
Mar 18 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
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
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
Python中for循环详解
2014/01/17 Python
Python切换pip安装源的方法详解
2016/11/18 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
python+django加载静态网页模板解析
2017/12/12 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python程序 创建多线程过程详解
2019/09/23 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
css3的transition属性详解
2014/12/15 HTML / CSS
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
电气自动化自荐信
2013/10/10 职场文书
大学生四年生活自我鉴定
2013/11/21 职场文书
校企合作协议书
2014/04/16 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript