学习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的图片的切换(以数字的形式)
Feb 14 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
javascript截取字符串小结
Apr 28 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
React优化子组件render的使用
May 12 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 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
Terran热键控制
2020/03/14 星际争霸
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP 万年历实现代码
2012/10/18 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
基于php-fpm的配置详解
2013/06/03 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
php字符集转换
2017/01/23 PHP
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现数据库编程方法详解
2015/06/09 Python
python搭建微信公众平台
2016/02/09 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
Python unittest单元测试框架总结
2018/09/08 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Python 实现简单的客户端认证
2020/07/29 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
财务主管岗位职责
2014/02/28 职场文书
英语教育专业自荐信
2014/05/29 职场文书
战略合作意向书
2014/07/29 职场文书
代理人委托书
2014/08/01 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
mysql 子查询的使用
2022/04/28 MySQL