滚动监控器是Bootstrap提供的非常实用的JavaScript插件,被广泛应用到Web开发中。其表现形式是:

  1、当用户鼠标滚动时,滚动条的位置会自动更新导航条中相应的导航项。

  2、用户拖动滚动条,当滚动到@mdo时,上面的@mdo导航项就会高亮显示.

<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">
<button data-target=".bs-example-js-navbar-scrollspy" data-toggle="collapse" type="button" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Project Name</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>
</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, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h4 id="mdo">@mdo</h4>
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
</div>
</div><!-- /example -->

Bootstrap_Javascript_滚动监视器的更多相关文章

  1. Bootstrap_Javascript

    弹窗 一. 结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-cont ...

  2. boostrap插件

    第一章:模态弹出框 一.导入JavaScript插件 Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都 ...

  3. 【Arduino学习笔记08】使用串口监视器显示数据

    代码及相关说明: 1 // 示例:读取模拟输入并显示在串口监视器中 2 3 const int ANALOG_IN = 0; 4 int val = 0; 5 6 void setup(){ 7 Se ...

  4. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  5. 【开源】专业K线绘制[K线主副图、趋势图、成交量、滚动、放大缩小、MACD、KDJ等)

    这是一个iOS项目雅黑深邃的K线的绘制. 实现功能包括K线主副图.趋势图.成交量.滚动.放大缩小.MACD.KDJ,长按显示辅助线等功能 预览图 最后的最后,这是项目的开源地址:https://git ...

  6. Android点击列表后弹出输入框,所点击项自动滚动到输入框上方

    使用微信的朋友圈会发现,点击某一条评论后输入框会弹出来,然后所点击的那一项会自动地滚动到输入框上方的位置,这样如果开始所点击的评论在屏幕很下方的话,就不会被输入框遮住,虽然微信这一点在我的MX2频繁点 ...

  7. iOScollectionView广告无限滚动(Swift实现)

    今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: ...

  8. MUI开发APP,scroll组件,运用到区域滚动

    最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...

  9. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

随机推荐

  1. LaTeX手动安装宏包(package)以及生成帮助文档的整套流程

    注意:版权所有,转载请注明出处. 我使用的是ctex套装,本来已经自带了许多package,但是有时候还是需要使用一些没有预装的宏包,这时就需要自己安装package了.下载package可以从CTA ...

  2. BNUOJ 34985 Elegant String 2014北京邀请赛E题 矩阵快速幂

    题目链接:http://acm.bnu.edu.cn/bnuoj/problem_show.php?pid=34985 题目大意:问n长度的串用0~k的数字去填,有多少个串保证任意子串中不包含0~k的 ...

  3. 10 个用于收集硬件信息的 Linux 命令

    知道自己的Linux系统运行在什么样的硬件组件上总是好的,因为如果涉及到在系统上安装软件包和驱动程序的话,这将有助于你处理兼容性问题. 因此,下面我们将给出一些非常有用的命令,它们可以帮助你提取你的L ...

  4. Django教程:第一个Django应用程序(4)

    Django教程:第一个Django应用程序(4) 2013-10-09 磁针石 #承接软件自动化实施与培训等gtalk:ouyangchongwu#gmail.comqq 37391319 #博客: ...

  5. Android 解决ScrollView下嵌套ListView进页面不在顶部的问题

    以下为整理: 方法1 刚开始还可以,后来再调试时就不行了. 为了解决scrollview和listview冲突  设置了listview的高度   结果进页面就不是在顶部了 . 解决方案1:Scrol ...

  6. 不区分大小写的in_array实现 thinkphp框架

    // 不区分大小写的in_array实现 function in_array_case($value,$array) { return in_array(strtolower($value),arra ...

  7. 吐槽一下CSDN的封停审查机制

    今天和一同学用私信交流,我回答中用了"春季zhaopin"这几个字(大家知道是哪两个字),结果提示我内容非法无法发送,我立即改动用了谐音发了过去.结果我出来一看,显示我的个人主页 ...

  8. git pull 部署问题一揽子问题解决

    之前遇到问题 在服务器拉取一直不成功, php 的shell函数 调用 git pull 一直不成功 ,但是单独 用root 权限 在机器上面 执行 git pull 是可以的 说明语法没问题. 而 ...

  9. [AngularJS] Default Child state and nav between child state

    Let's say we want a parent state which is a abstract state. Two children states, one is for sinlge a ...

  10. linux系统启动

    在本文中,我们按电源按钮简要叙述,以便能够登录到系统,在此期间,系统和计算机硬件是如何一起工作.既作为自己整理知识的摘要,有可能linux0绍,高手请略过. 一般来说linux的启动能够分成三个阶段: ...