滚动监控器是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. STL之set、multiset、functor&pair使用方法

    set是一个集合容器,其中包含的元素是唯一的,集合中的元素是按照一定的顺序排列的.元素插入过程是按照排序规则插入,所以不能使用指定位置插入. set采用红黑树变体的数据结构实现,红黑树属于平衡二叉树. ...

  2. rnqoj-73-展演队型-dp

    纯属于敢想就敢做的题目,列出来状态转移就OK了 #include<stdio.h> #include<string.h> #include<iostream> #i ...

  3. 45个必备的实用jQuery代码段[转载]

    1. 如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“s ...

  4. ecshop获取浏览器各个版本

    <?php /** * 获得浏览器名称和版本 * * @access public * @return string */ function get_user_browser() { if (e ...

  5. DevExpress 控件 GridControl常见用法

    刚接触DevExpress第三方控件,把GridControl的常见用法整理一下,以供参考: 说明: gcTest   GridControl gvText    GridView //隐藏最上面的G ...

  6. JDK6 下载地址

    http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-javase6-41940 ...

  7. 《大话操作系统——做坚实的project实践派》(6)

     继续写硬件体系.这个不写完.不会写操作系统内核.由于根基不正,则难于达到上层境地.

  8. [Flux] 1. Development Environment Setup

    Install packages: { "name": "reactflux", "version": "1.0.0", ...

  9. UVA10972 - RevolC FaeLoN(双连通分量)

    题目链接 题意: 给定一个无向图,问最少加入多少条边,使得这个图成为连通图 思路:首先注意题目给出的无向图可能是非连通的,即存在孤立点.处理孤立点之后.其它就能够当作连通块来处理.事实上跟POJ335 ...

  10. WCF - 绑定后续之自定义绑定

    自定义信道基类 WCF是一个极具扩展性的通信框架 无论在服务模型层还是信道层 都具有很多扩展点 而信道层的扩展点主要体现在实现自定义信道以增强信道栈处理信息的能力 比如我们可以扩展信道层 实现一个自定 ...