学习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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 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的文件操作与算法实现的面试题示例
2015/08/10 PHP
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
详解Python的Lambda函数与排序
2016/10/25 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
Python的几种主动结束程序方式
2019/11/22 Python
python求质数列表的例子
2019/11/24 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
成人教育自我鉴定
2013/11/01 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
工地安全检查制度
2014/02/04 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
青年文明号申报材料
2014/12/23 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
Python装饰器详细介绍
2022/03/25 Python