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 UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
js实现移动端图片滑块验证功能
Sep 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
You might like
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
javascript 动态添加表格行
2006/06/22 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
JavaScript面向对象精要(上部)
2017/09/12 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
玩转python爬虫之URLError异常处理
2016/02/17 Python
python模拟表单提交登录图书馆
2018/04/27 Python
详解python里的命名规范
2018/07/16 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
销售员求职个人的自我评价
2014/02/19 职场文书
给校长的一封建议书
2014/03/12 职场文书
爱国演讲稿400字
2014/05/07 职场文书
生日宴会策划方案
2014/06/03 职场文书
煤矿安全生产标语
2014/06/06 职场文书
英文邀请函
2015/02/02 职场文书
民主生活会主持词
2015/07/01 职场文书
婚宴父亲致辞
2015/07/27 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python