滚动侦测

　　滚动侦测基本使用方法为：

<body data-spy="scroll">

    <nav class="navbar navbar-default navbar-fixed-top">

        <ul class="nav navbar-nav">

            <li class="active"><a data-target="#first">first</a></li>

            <li><a data-target="#second">second</a></li>

            <li><a data-target="#third">third</a></li>

        </ul>

    </nav>

    <div class="content">

        <h1 id="first">first</h1>

        <h1 id="second">second</h1>

        <h1 id="third">third</h1>

    </div>

</body>

　　关键的属性为body上面的data-spy="scroll" 同时标题元素必须按照格式.nav li > a的格式正确嵌套因为JS是通过这个格式来选择元素的

　　a元素的data-target的值要和内容元素互相对应,如标题为data-target="#demo"则内容元素要设置为id="demo"

　　滚动容器内可以设置data-offset，该属性表示滚动容器和滚动内容的距离在这个数值之内就显示，默认值是10

　　如果在滚动侦测的容器内进行DOM更新，为了滚动侦测功能能够正常使用需要对内容进行更新，代码如下：

$('[data-spy="scroll"]').each(function () {

    var $spy = $(this).scrollspy('refresh')

})

JS使用

　　JS调用的方式为：

$("body").scrollspy()

　　当使用JS的方式运行滚动侦测功能时如果进行DOM更新后，上面的更新方式不会起作用，只能重新调用$("body").scrollspy()来继续让滚动侦测继续有效

　　在JS中设置滚动容器和滚动内容之间的距离的属性为offset

　　滚动容器提供了一个事件activate.bs.scrollspy该事件在滚动到一个新的内容块时调用，使用方式为：

$("body").on("activate.bs.scrollspy",function(){})

BootStrap--scroll的更多相关文章

  1. 50个Bootstrap扩展插件

    Bootstap这个框架本身已经包含了开发网页的众多要素,包括了常用的工具以及扩展组件,如果你在开发页面时觉得在某些方面还不够的话,不妨看看最新收集的50个Bootstrap扩展插件,这些插件在我们平 ...

  2. 包含修改字体，图片上传等功能的文本输入框-Bootstrap

    通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...

  3. Bootstrap 快速人门案例——前端最火的插件

    今天,我给小白们分享一下比较流行的Bootstrap框架,它在工作中得到许多公司的青睐,因此对于升职和加薪很重要.同时,我们可以快速完成开发任务,减少发开周期,有不对的地方望大家指正. 如果你想走的更 ...

  4. Bootstrap JavaScript插件

      在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...

  5. bootstrap开发一个简单网页。

    CSS代码: body{        padding-top: 50px;        padding-bottom: 50px;        overflow: auto!important; ...

  6. 初学者--bootstrap（五）JavaScript插件（上）----在路上（6）

    jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...

  7. 【读书笔记《Bootstrap 实战》】6.单页营销网站

    我们已经掌握了很多实用 Bootstrap  的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...

  8. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  9. （转）解决bootstrap 模态框的页面抖动

    使用bootstrap时,往往会出现页面抖动的效果,使得用户体验十分不友好. Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置bod ...

  10. bootstrap 20161012

    栅格系统 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="u ...

随机推荐

  1. EOS Dapp开发（1）-基于Docker的开发环境搭建

    随着EOS主网的上线,相信基于EOS的Dapp开发会越来越多,查阅了很多资料相关的开发资料都不是很多,只能自己摸索,按照网上仅有的几篇教程,先git clonehttps://github.com/E ...

  2. 纯css3加载动画

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...

  3. 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格

    EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

  4. 国内比特币bitcoin交易平台

    火币网:   www.huobi.com 比特币中国:   www.btcchina.com okcoin:    www.okcoin.cn 中国比特币:   www.chbtc.com 比特币交易 ...

  5. 微信小程序：页面配置 page.json

    微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...

  6. GreenOpenPaint的实现（四）放大缩小处理滚动事件

    放大缩小看似简单,实际上还是比较复杂的.所以专门拿出来说明. 缩放这块,主要就是处理m_pDoc->m_scalefactor void CGreenOpenPaintView::OnButto ...

  7. StringBuffer类的常用方法

    StringBuffer类和String一样,也用来代表字符串.只是由于StringBuffer的内部实现方式和String不同,所以StringBuffer在进行字符串处理时,不生成新的对象,在内存 ...

  8. 框架-spring入门总结

    框架-spring入门总结 参考: http://www.cnblogs.com/heavenyes/p/3908546.html http://www.cnblogs.com/heavenyes/p ...

  9. SDN前瞻 该来的来了！SDN 软件定义网络

    SDDC:Software Defined Data Center 软件定义数据中心,全数据中心软件化. 在我们接触SDN概念之前,服务器虚拟化,软件虚拟化技术已经是非常成熟了.如果网络能够被虚拟化, ...

  10. MongoDB 默认写入关注保存数据丢失问题与源码简单分析

    MongoDB 默认写入关注可能保存数据丢失问题分析 问题描述: EDI服务进行优化,将原有MQ发送成功并且DB写入成功,两个条件都达成,响应接收订单数据成功,修改为只有有一个条件成功就响应接收数据成 ...