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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 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控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
php如何获取Http请求
2020/04/30 PHP
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
python多进程共享变量
2016/04/06 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
Python socket处理client连接过程解析
2020/03/18 Python
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
Python的两道面试题
2013/06/29 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
个人简历中自我评价
2014/02/11 职场文书
上课看小说检讨书
2014/02/22 职场文书
聘任书模板
2014/03/29 职场文书
松材线虫病防治方案
2014/06/15 职场文书
个人优缺点总结
2015/02/28 职场文书
远程教育学习心得体会
2016/01/23 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
SQLServer中exists和except用法介绍
2021/12/04 SQL Server