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

bootstrap滚动监控器使用方法解析

Posted in Javascript onJanuary 13, 2017

滚动监控器

1、当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项。
这是因为该插件可以自动检测滚动条到达哪个位置，然后在需要高亮的菜单元素上加了一个“active”样式。

滚动监控器?滚动监控器的设计

第一步：使用滚动监控器，首要的条件是在页面中加载对应的插件。在这里你可以加载合并好的bootstrap.js或者其独立的插件文件scrollspy.js。这里以加载合并好的js为例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

第二步：设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接，锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”（id名称可自由定义），方便滚动监控。

bootstrap滚动监控器使用方法解析

第三步：设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy（这个类名可自由定义）的容器中，其中放了多个子内容框。每个子内容框有一个标题，而且每个标题的ID值与导航菜单项中的锚点链接名相对应，并且注意加入“data-target=”#navbar-menu””属性（这个属性值要与前面的nav标签的id名称保持一致）

<div class="scrollspy" data-target="#navbar-menu">
  <h4 id="blog">Blog</h4>
  <p>…</p>
  <h4 id="html">Html</h4>
  <p>…</p>
  <h4 id="css">CSS</h4>
  <p>…</p>
  <h4 id="sass">Sass</h4>
  <p>…</p>
  <h4 id="js">JavaScript</h4>
  <p>…</p>
  <p>…</p>
  <h4 id="php">PHP</h4>
  <p>…</p>
  <p>…</p>
  <h4 id="about">About</h4>
  <p>…</p>
  <p>…</p>
</div>

第四步：为监控对象定义样式，设置容器scrollspy大小（设置高度目的是为了产生垂直滚动条）。

.scrollspy{
  height:500px;
  font-size:20px;
  overflow:auto;
}

滚动监控器?声明属性触发滚动监控

为监控对象设置被监控的data属性：data-spy=”scroll”，指定监控的导航条：data-target=”#navbar-menu”。同时定义监控过程中滚动条偏移位置data-offset=”60”。代码如下：

<div class="scrollspy" data-spy="scroll" data-target="#navbar-menu" data-offset="60">
 …
</div>

滚动监控器?在body中加监控
还可以直接在body上进行滚动条监控，此时要将滚动监控器移到body上，而且导航nav一定要在body内部。

<body data-spy="scroll" data-target="#navbar-menu">
  <div class="navbar navbar-default navbar-fixed-top" id="navbar-menu">
  </div>
  <h3 id="blog">Blog</h3>
  <p>…</p>
</body>

导航条必须设置为顶部固定样式（navbar-fixed-top）

滚动监控器?JavaScript方法触发滚动监控器

在Bootstrap框架中，使用JavaScript方法触发滚动监控器相对来说较为简单，只需要指定两个容器的名称即可

<nav id="navbar-menu" class="navbar navbar-default navbar-static" role="navigation">
 …
</nav>

<div class="scrollspy" id="scrollspy">
 …
</div>

JavaScript触发可以这样写：

$(function(){
  $("#scrollspy").scrollspy({
    target: "#navbar-menu"
  });
})

Bootstrap的滚动监控还提供了一个方法scrollspy(“refresh”)。当滚动监控所作用的DOM有增加或删除页面元素的操作时，需要调用下面的refresh方法：

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

注意的是，这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外，还提供了一个offset参数，此参数默认值为10。默认情况下，滚动内容距离滚动容器10px以内的话，就高一片面前显示所对应的菜单项。

滚动监实例 ：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.scrollspy-example{
  height:500px;
  font-size:20px;
  overflow:auto;
}
</style>
</head>
<body>
<div class="bs-docs-section">

 <div class="bs-example">

  <!----导航容器-->
  <nav role="navigation" class="navbar navbar-default navbar-static" id="navbar-example2">
   <div class="container-fluid">   

    <div class="navbar-header">

    <!----点击这个按钮时，触发bs-example-js-navbar-scrollspy： 这个css类,也就是下拉列表-->
     <button data-target=".bs-example-js-navbar-scrollspy" data-toggle="collapse" type="button" class="navbar-toggle collapsed">     
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </button>

    <!----导航标题-->
     <a href="#" class="navbar-brand">导航标题</a>
    </div>

     <!----折叠菜单容器-->
    <div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">

     <!----导航-->
     <ul class="nav navbar-nav">
      <li><a href="#fat">@fat</a></li>
      <li><a href="#mdo">@mdo</a></li>

      <li class="dropdown">
       <a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" id="navbarDrop1" href="#">Dropdown <span class="caret"></span></a>

       <ul aria-labelledby="navbarDrop1" role="menu" class="dropdown-menu">
        <li><a tabindex="-1" href="#one">one</a></li>
        <li><a tabindex="-1" href="#two">two</a></li>

         <!----分割线-->
        <li class="divider"></li>
        <li><a tabindex="-1" href="#three">three</a></li>

       </ul>
      </li>

     </ul>
     <!----导航结束-->
    </div>

   </div>

  </nav>  

  滚动监对象
  <div class="scrollspy-example" data-offset="0" data-target="#navbar-example2" data-spy="scroll">
   <h4 id="fat">@fat</h4>
   <p>Ad leggings keytar,</p>
   <h4 id="mdo">@mdo</h4>
   <p>Veniam marfa mustache skateboard</p>
   <h4 id="one">one</h4>
   <p>Occaecat commodo aliqua delectus.</p>
   <h4 id="two">two</h4>
   <p>In incididunt echo park, officia deserunt mcsweeney's </p>
   <h4 id="three">three</h4>
   <p>Ad leggings keytar</p>
   <p>Keytar twee blog</p>

  </div>
 </div>

</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

bootstrap滚动监控器使用方法解析

- Author -

lijiao

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

Javascript 相关文章推荐
JavaScript中的Array对象使用说明
Jan 17 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
Express URL跳转（重定向）的实现方法
Apr 07 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
微信小程序 开发MAP（地图）实例详解
Jun 27 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
微信小程序 页面之间传参实例详解
Jan 13 #Javascript
bootstrap下拉菜单使用方法解析
Jan 13 #Javascript
js数组与字符串常用方法总结
Jan 13 #Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 #Javascript
bootstrap按钮插件（Button）使用方法解析
Jan 13 #Javascript
微信小程序 两种滑动方式（横向滑动，竖向滑动）详细及实例代码
Jan 13 #Javascript
bootstrap警告框使用方法解析
Jan 13 #Javascript
JDK(1) Vite(1) 腾讯云(1) 内存池(1) Foreign Key(1) 云服务器(1) 数据备份(2) hook(1) 外键约束(1) expdp(1)
You might like
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php类中的$this，static，final，const，self这几个关键字使用方法
2015/12/14 PHP
PHP xpath()函数讲解
2019/02/11 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
range 标准化之获取
2011/08/28 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
深入了解JavaScript的逻辑运算符（与、或）
2016/12/20 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
Vuex简单入门
2017/04/19 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
vue中的inject学习教程
2019/04/24 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
React精髓！一篇全概括小结(急速)
2019/05/23 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
Python模拟登录12306的方法
2014/12/30 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python反编译学习之字节码详解
2019/05/19 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
社区学习雷锋活动总结
2014/04/25 职场文书
排查整治工作方案
2014/06/09 职场文书
新闻报道策划方案
2014/06/11 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
计算机教师工作总结
2015/08/13 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
python基础之//、/与%的区别详解
2022/06/10 Python