滚动侦测

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

<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. Kubernetes实战(二)：k8s v1.11.1 prometheus traefik组件安装及集群测试

    1.traefik traefik:HTTP层路由,官网:http://traefik.cn/,文档:https://docs.traefik.io/user-guide/kubernetes/ 功能 ...

  2. 【工具】代码生成器-python脚本

    我觉得造轮子这件事情,是谁都可以做的.只不过做得好或者不好而已,用心了做得就要优雅一点. 之前用过java的代码生成器,什么pojodobodbo都能生成,于是我也来自己造一个轮子. 造轮子的事情是没 ...

  3. 使用Ajax验证用户是否已存在

    在服务器端使用Servlet,里面在集合里存了几个字符串,没有对数据库操作. 前台input页面和Ajax验证: <%@ page language="java" conte ...

  4. 如何把PDF文件转换为JPG图片

    大家有遇到需要将PDF文件转换为JPG的情况么,文档资料里面经常会有一些图片类型的内容,有的时候我们需要获取这些图片内容,但是PDF文件又是不可编辑的,那如何把PDF文件转换为JPG图片呢,跟着小编一 ...

  5. mysql数据库设置不区分大小写，启动方法

    用root帐号登录后,在/etc/my.cnf中的[mysqld]后添加添加lower_case_table_names=1,重启MYSQL服务,这时已设置成功:不区分表名的大小写: lower_ca ...

  6. 离线安装Cloudera Manager5.2.0和CDH5 2.0

    第一次安装出现了各种问题,尤其是对于不是太熟悉linux系统的更是头疼不已呀!特此记录一下,希望能够让小伙伴们少走点弯路. 1.给机器添加路由 (根据自己的机器情况,可以忽略)   route add ...

  7. AI学习资料

    OpenAI Gym介绍 http://m.blog.csdn.net/u010510350/article/details/71450232

  8. PHP设计模式_适配器模式

    将各种截然不同的函数接口封装成统一的API. PHP中的数据库操作有MySQL,MySQLi,PDO三种,可以用适配器模式统一成一致,使不同的数据库操作,统一成一样的API.类似的场景还有cache适 ...

  9. JS中的slice和splice

    1,slice  : 定义:接收一个或两个参数,它可以创建一个由当前数组中的一项或多项组成的新数组,注意是新数组哦~ 也就是说它不会修改原来数组的值. 用法:slice( para1 ),会截取从pa ...

  10. LINUX实践--程序破解

    实验思想 本次实验的主要思想有两个,第一个是修改跳转指令,把它变成无条件跳转使得无论输入什么用户名都跳转到失败的那个选项中去,第二个思想是修改比对的内容,即不判断条件,从而成功 实验步骤 1.首先从老 ...