学习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 相关文章推荐
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 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
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
php实现图片缩略图的方法
2016/03/29 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python批量图片处理简单示例
2019/08/06 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
辅导员学期工作总结
2015/08/14 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书