首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap教程JS插件滚动监听学习笔记分享

Posted in Javascript onMay 18, 2016

本文主要来学习一下JavaScript插件--滚动监听。

1、案例

滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。你可以试试滚动这个页面，看看左侧导航的变化。

先把实现的代码上了，你可以通过测试代码先来看看效果。

<!DOCTYPE html>
 <html>
 <head>
 <title>Bootstrap</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">
</script>
 <![endif]-->
  <style type="text/css"> .scrollspy-example
   {
    height: 200px;
    overflow: auto;
   position: relative;
   border:1px solid red;
  }
 </style>
 </head>
 <body>
<div class="container" >
  <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> 
  <div class="navbar-header">
   <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="#">Project Name</a>
  </div>
  <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
   <ul class="nav navbar-nav">
   <li class="active"><a href="#fat">@fat</a></li>
   <li><a href="#mdo">@mdo</a></li>
   <li class="dropdown">
    <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown
 <b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
    <li><a href="#one" tabindex="-1">one</a></li>
    <li><a href="#two" tabindex="-1">two</a></li>
    <li class="divider"></li>
    <li><a href="#three" tabindex="-1">three</a></li>
    </ul>
   </li>
   </ul>
  </div>
  </nav>
  <div data-offset="0" class="scrollspy-example" data-spy="scroll" data-target="#navbar-example">
  <h4 id="fat">@fat</h4>
  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold
 out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
 mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie
 minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson
 aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
  <h4 id="mdo">@mdo</h4>
  <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.
 Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. 
Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1
 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar
 deserunt.</p>  <h4 id="one">one</h4>  <p>Occaecat commodo aliqua delectus.
 Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next
 level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis
 aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. 
Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
  <h4 id="two">two</h4>
  <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats
 sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin
 coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably
 haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt
 sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four
 loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
  <h4 id="three">three</h4>
  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold
 out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
 mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg
 hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes 
 anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
  <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente
 synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard
 of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out,
 terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan.
 Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit
 minim commodo ullamco thundercats. </p>
  </div>
 </div>
 <script src="js/jquery-2.0.3.min.js">
</script>
 <script src="js/bootstrap.min.js">
</script>
 </body>
 </html>

用法1--通过data属性

通过为需要监听的页面元素（一般是）不过在上面添加在了Div上面，你可以自己看看代码就明白了。然后给div添加属性data-spy="scroll"就可很轻松的为顶部导航条添加滚动监听功能。然后为其添加data-target属性，此属性的值为任何Bootstrap中.nav组件的父元素的ID或class。

 <div data-offset="0" class="scrollspy-example" data-spy="scroll" data-target="#navbar-example">

 ........ 

</div>

导航链接地址必须有对应的目标

导航条内的链接地址必须有对应的页面元素具有同样的ID值。

用法2--通过JavaScript

通过JavaScript启动滚动监听：

<script type="text/javascript"> $(function () {
  $('.scrollspy-example').scrollspy({ target:'#navbar-example' });
  }) </script>

通过将样式类为scrollspy-example的div，去掉它的data-target属性。这样同样可以进行鼠标滚轮的切换。

2、方法

.scrollspy('refresh')

使用滚动监听插件时，每当页面中从DOM中增加或删除页面元素时，都需要调用此方法以，如下：

 $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') })

3、选项

可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-offset=""。

Bootstrap教程JS插件滚动监听学习笔记分享

4、事件

<script type="text/javascript"> $('#navbar-example').on('activate.bs.scrollspy', function () {
   alert(1);
 }) </script>

 最后注意:针对滚动监听的内容当然要添加滚动条，也就是要预先添加样式 

<style type="text/css"> .scrollspy-example
   {
    height: 200px;
    overflow: auto;
   position: relative;
   border:1px solid red;
  }
 </style>

给与Div内容一定的高度。

以上就是Bootstrap滚动监听相关内容的学习笔记，如果大家还想继续学习Bootstrap，可以点击这里，继续学习，希望对大家的学习有所帮助，也希望大家继续关注三水点靠木的更多精彩内容。

Bootstrap教程JS插件滚动监听学习笔记分享

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
javascript打印输出json实例
Nov 11 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
浅析JavaScript中的平稳退化（graceful degradation）
Jul 24 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Node.js刷新session过期时间的实现方法推荐
May 18 #Javascript
JS+Canvas 实现下雨下雪效果
May 18 #Javascript
如何判断Javascript对象是否存在的简单实例
May 18 #Javascript
jquery遍历json对象集合详解
May 18 #Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 #Javascript
js验证框架实现代码分享
May 18 #Javascript
在JavaScript中对HTML进行反转义详解
May 18 #Javascript
callback(1) 热力图(1) dict(1) 字符画(1) Git(3) 脚本(1) hook(1) cudnn(1) RTX 3050 ti(1) cudn(1)
You might like
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
前端必学之PHP语法基础
2016/01/01 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
php无限极分类实现方法分析
2019/07/04 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
JS实现队列与堆栈的方法
2016/04/21 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
Python中的元类编程入门指引
2015/04/15 Python
Python中__new__与__init__方法的区别详解
2015/05/04 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
python生成随机图形验证码详解
2017/11/08 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
Gap中国官网：美式休闲风服饰
2017/02/05 全球购物
SmartBuyGlasses中国：唯视良品（销售名牌太阳镜、墨镜和眼镜框）
2017/07/03 全球购物
世界上最大的高分辨率在线图片库：Alamy
2018/07/07 全球购物
计生工作先进事迹
2014/08/15 职场文书
大学生学习计划书
2014/09/15 职场文书
党的群众路线对照检查材料思想汇报（学校）
2014/10/04 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
士兵突击观后感
2015/06/16 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS