学习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 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
在PHP中执行系统外部命令
2006/10/09 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Python translator使用实例
2008/09/06 Python
python发送邮件实例分享
2017/07/28 Python
图解Python变量与赋值
2018/04/03 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
python中四舍五入的正确打开方式
2021/01/18 Python
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
房地产开发项目建议书
2014/05/16 职场文书
路政管理求职信
2014/06/18 职场文书
销售经理岗位职责
2015/01/31 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
办公室日常管理制度
2015/08/04 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL