学习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 相关文章推荐
JavaScript中为元素加上name属性的方法
May 09 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 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 获取可变函数参数的函数
2009/08/26 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
python中的多重继承实例讲解
2014/09/28 Python
九步学会Python装饰器
2015/05/09 Python
Python编程实现蚁群算法详解
2017/11/13 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
详解Python 函数如何重载?
2019/04/23 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
教师评语大全
2014/04/28 职场文书
应届毕业生求职信
2014/05/26 职场文书
元旦趣味活动方案
2014/08/22 职场文书
道歉信范文
2015/05/12 职场文书