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>

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

Javascript 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
利用vue实现模态框组件
Dec 19 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
js实现弹窗效果
Aug 09 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 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
You might like
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
python self,cls,decorator的理解
2009/07/13 Python
Python随机读取文件实现实例
2017/05/25 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
python使用配置文件过程详解
2019/12/28 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
python pymysql库的常用操作
2020/10/16 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
运动会广播稿150字
2014/02/19 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
聘用合同范本
2015/09/21 职场文书
2016年教师节慰问信
2015/12/01 职场文书