滚动侦测

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

<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. 204-React DOM 元素

    一.概述 为了提高性能和跨浏览器兼容性,React实现了一个独立于浏览器的DOM系统. 在React中,所有DOM属性和属性(包括事件处理程序)都应该是camelCased的.例如,HTML属性tab ...

  2. java-mybaits-00101-基础安装配制

    一.数据库安装 http://jingyan.baidu.com/article/363872ec2e27076e4ba16fc3.html 二.eclipse连接mysql http://jingy ...

  3. SAP GUI常用快捷键

    F1:帮助 F2:双击.比如TC行的双击,LIST行的双击等 F3:后退(Back),后退按钮 Shift+F3:退出(Exit),退出按钮 F4:搜索帮助 F8:执行 F10:菜单 F12:取消(C ...

  4. 在Marathon 上部署 cAdvisor + InfluxDB + Grafana Docker监控

    关于 Docker 容器的监控,google cAdvisor 是个很好的工具,但是它默认只显示实时数据,不储存历史数据.为了存储和显示历史数据.自定义展示图,可以把将cAdvisor与InfluxD ...

  5. Flask目录

    Flask Python数据库连接池DBUtils 单例模式 flask—信号(blinker) Flask-SQLAlchemy flask扩展 -- flask-script Flask form ...

  6. Q_OBJECT宏的作用

    The Q_OBJECT macro at the beginning of the class definition is necessary for all classes that define ...

  7. 服务器相关 HTTP 请求错误

    HTTP 400 - 请求无效 HTTP 401.1 - 未授权:登录失败 HTTP 401.2 - 未授权:服务器配置问题导致登录失败 HTTP 401.3 - ACL 禁止访问资源 HTTP 40 ...

  8. Flask添加翻页功能（非sqlalchemy）

    最近做flask的项目,需要增加翻页的功能,网上找的教程都是结合sqlalchemy的,可是我用的不是sqlalchemy,肿木办呢? 以下是我的做法 一.前端 1.传递页码 前端我使用ajax提交表 ...

  9. scp命令简单应用

    实例1:从远处复制文件到本地目录 $scp root@10.6.159.147:/opt/soft/demo.tar /opt/soft/ 说明: 从10.6.159.147机器上的/opt/soft ...

  10. Ubuntu安装 Spark2.3.0 报错原因及解决

    Ubuntu 安装Spark出现的问题及解决 最近在搭建Hadoop集群环境和Spark集群环境,出现的问题可能不太复杂,纯粹记录安装步骤和问题解决办法.集群环境使用的是(2台)阿里云主机,操作系统是 ...