滚动侦测

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

<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. 前端错误提示whitelabel error page

    1:错误提示whitelabel error page:需要定义一个error.html  ,否则提示如图

  2. POJ2195:Going Home(费用流入门）

    http://poj.org/problem?id=2195 #include <iostream> #include <stdio.h> #include <strin ...

  3. 模块讲解----subprocess模块

    历史 #输出结果到屏幕上,并不返回执行状态os.system('dir')#保存命令的执行结果输出ret = os.popen('dir').read() 问题:上面2条是把命令结果保存下来了,但是返 ...

  4. VS2010/MFC编程入门之十七（对话框：文件对话框）

    上一讲鸡啄米介绍的是消息对话框,本节讲解文件对话框.文件对话框也是很常用的一类对话框. 文件对话框的分类       文件对话框分为打开文件对话框和保存文件对话框,相信大家在Windows系统中经常见 ...

  5. VC++使用HOOK API 屏蔽PrintScreen键截屏以及QQ和微信默认热键截屏

    转载:http://blog.csdn.net/easysec/article/details/8833457 转载:http://www.vckbase.com/module/articleCont ...

  6. Thread.Start和Delegate.BeginInvoke 以及Control.BeginInvoke

    Thread.Start starts a new OS thread to execute the delegate. When the delegate returns, the thread i ...

  7. 添加 LogCat 到Eclipse

    当你第一次在 Eclipse 中运行 Android 项目的时候,Eclipse 会提醒你一次是否要添加 LogCat 这个工具. 如果你现在还没有添加上的话,我这里教你一下如何手动添加 LogCat ...

  8. install ros-indigo-map-server

    sudo apt-get install ros-indigo-map-server

  9. python 列表的递归求和

    def list_sum(num_List): : ] else: ] + list_sum(num_List[:]) print(list_sum([, , , , ]))

  10. 使用 if 语句

    与很多编程语言一样,if 表达式用来处理逻辑条件.在 R 中,逻辑条件通常表达为某个表达式返回的单值逻辑向量.例如,我们可以写一个简单的函数 check_positive,如果输入一个正数则返回 1, ...