滚动侦测

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

<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. H5上传压缩图片

    看这个,比较全的 https://github.com/mhbseal/html5ImgCompress ,几乎所有痛点都解决了! PC上传图片 基本结构 form[enctype="mul ...

  2. 15.Git面试题

    1.git常见命令作用 git init 在哪一目录下,就会在该目录下生成.git目录. 注意:git init命令会把当前目录当作库. git status 查看本地库的状态 git add . 将 ...

  3. 多图片生成pdf文件

    这里记录多个图片合并生成一个pdf文件的方法. 首先maven引入所需jar包: <dependency> <groupId>com.itextpdf</groupId& ...

  4. 驼峰命名和下划线命名互转php实现

    驼峰命名和下划线命名经常需要互转,下面提供两种php的实现方式.第一种方法效率相对差一些,实现方式如下: //驼峰命名转下划线命名 function toUnderScore($str) { $dst ...

  5. 本地项目提交到github或者gitlab

    在 gitlab中创建新项目 创建好之后会生成一个.Git路径 切换回本地工程文件目录 右键 点击git bash 在git bash 里面执行git init 初始化 git add . 提交当前 ...

  6. [py]函数小结

    函数作用域(函数前向引用) --> 嵌套(递归是一种个特殊的嵌套) --> 递归(回归,递归是一种特殊的迭代) --> 迭代 --> 生成器 --> 匿名函数 递归 一种 ...

  7. CentOS6.9安装httpd并正确配置静态IP地址

    题目要求 在vmware中安装一台虚拟机,操作系统为centos6.9 ip地址为 192.168.56.11 要求: 1.xshell能够连接上此虚拟机 2.此虚拟机必须可以上网 3.使用yum安装 ...

  8. python 利用爬虫获取页面上下拉框里的所有国家

    前段时间,领导说列一下某页面上的所有国家信息,话说这个国家下拉框里的国家有两三百个,是第三方模块导入的,手动从页面拷贝,不切实际,于是想着用爬虫去获取这个国家信息,并保存到文件里. 下面是具体的代码, ...

  9. Docker 随笔

    设置镜像时区 RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime RUN echo 'Asia/Shanghai' >/etc ...

  10. java之throw和throws

    抛出异常有三种形式,一是throw,一个throws,还有一种系统自动抛异常.下面它们之间的异同. 一.系统自动抛异常 当程序语句出现一些逻辑错误.主义错误或类型转换错误时,系统会自动抛出异常:(举个 ...