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操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
vue之将echart封装为组件
Jun 02 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
微信小程序 页面之间传参实例详解
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中的implements 使用
2017/06/13 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
利用python修改json文件的value方法
2018/12/31 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
python turtle 绘制太极图的实例
2019/12/18 Python
Pygame的程序开始示例代码
2020/05/07 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
高二地理教学反思
2014/01/24 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫