很多时候我们在浏览一些网页的时候，导航条会根据我们浏览网页的进度而发生不同的变化，这种就是滚动监听。

你的顶栏导航，添加data-spy="scroll"到您想要刺探（最典型的是这将是该元素<body>）。然后添加data-target任何引导的父元素的ID或类属性.nav的组件。

我们来写一个基本的实例

先引入CSS文件

        <link href="bootstrap.min.css" rel="stylesheet">

我们需要在<body>中添加属性data-spy="scroll" data-target=".navbar" data-offset="70"来实现滚动监听

data-target=".navbar" ：这是一个滚动条，依赖于导航条

    <body data-spy="scroll" data-target=".navbar" data-offset="70">

            ...

    </body>

添加一个容器div，创建导航条

navbar-fixed-top属性使导航条一直处于浏览器顶部

<div class="container-fluid">：这是一个充满全屏的容器

navbar-default navbar-collapse：这是样式

id="myscrollspy"：是用来索引的

<ul><li>用来做导航栏

        <div class="container">

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

                <div class="container-fluid">

                    <div class="collapse navbar-collapse js-navbar-scrollyspy" id="myscrollspy">

                        <ul class="nav navbar-nav">

                            <li><a href="#">@qwe</a></li>

                            <li><a href="#">@asd</a></li>

                        </ul>

                    </div>

                </div>

            </nav>

        </div>

效果

在容器div中添加应该要跳转的内容

先写一个<hn>标签，在里面指定id，再添加内容

为方便，随便写点内容，然后把<a>中的href属性修改为“#qwe”和“#asd”（因为只在同一个页面内跳转，注意要用“#”来索引）

            <h2 id="qwe">@qwe</h2>

            <p>qweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeqhwduqhuwduqwg

            asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgd

            asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsasduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgd

            asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgduadusdkagsudguasgdukasgdukagsudgauskgdk</p>

            <h2 id="asd">@asd</h2>

            <p>qweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeqhwduqhuwduqwg

            asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgaus

            asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uasssssssssssssssssasduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgd

            asduiashduassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgdsssssssshdsuadusdkagsudguasgdu

            uassssssssssssssssssssssssshdsuadusdkagsudguasgdukasgdukagsudgauskgdkgdk</p>

然后我们来添加js代码

        <script src="jquery-3.1.0.min.js" type="text/javascript"></script>

        <script src="bootstrap.min.js" type="text/javascript"></script>

实行查看效果

效果不明显，那是因为内容不够多，没有使浏览器产生上下的滚动条，需要添加新的内容

既然这样，顺便把下拉菜单也同时说了

在<ul>中添加新代码作为下拉菜单

                            <li class="dropdown">

                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>

                                <ul class="dropdown-menu" role="menu">

                                    <li><a href="#one" tabindex="-1">one</a></li>

                                    <li><a href="#two" tabindex="-1">two</a></li>

                                    <li><a href="#three" tabindex="-1">three</a></li>

                                </ul>

                            </li>

效果

然后为其添加新的内容

（省略，使内容多到让浏览器产生上下的滚动条，同时也要仿照上面的，记得在<hn>标签中添加id索引）

注意红框内，

现在我们向下拉，注意红框内，@asd那里发生了变化

再继续往下，由于“one”是在下拉菜单中，现在“下拉菜单”发生了变化

同样，点击里面的标签，也会有跳转效果

Bootstrap入门（二十六）JS插件3：滚动监听的更多相关文章

  1. JavaWeb学习记录（二十六）——在线人数统计HttpSessionListener监听实现

    一.session销毁控制层代码 public class InvalidateSession extends HttpServlet { public void doGet(HttpServletR ...

  2. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  3. Bootstrap入门（十六）组件10：well和具有响应式特性的嵌入内容

    Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容 well组件可以为内容增添一种切入效果. 具有响应式特性的嵌入内容可以根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例 ...

  4. 网站开发进阶(二十六)js刷新页面方法大全

    js刷新页面方法大全 在项目开发过程中,需要实现刷新页面.经过学习,发现下面这条语句就可以轻松实现. location.reload(); // 刷新页面 有关刷新页面的其它方法,具体学习内容如下,有 ...

  5. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  6. Bootstrap <基础二十九>面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  7. Bootstrap <基础二十五>警告（Alerts）

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

  8. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

  9. Bootstrap <基础二十二>超大屏幕（Jumbotron）

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

  10. Bootstrap<基础二十> 标签

    Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...

随机推荐

  1. springMVC注解及优化

    1. 新建web project 2. 添加jar 3. 改写web.xml, 注意spring-servlet.xml的名字 <?xml version="1.0" enc ...

  2. 【poj解题】1308

    判断一个图是否是一个树,树满足一下2个条件即可:1. 边树比node数少12. 所有node的入度非0即1 节点数是0的时候,空树,合法树~ 代码如下 #include <stdio.h> ...

  3. git fetch

    http://www.ruanyifeng.com/blog/2012/07/git.html 流程 默认情况下,git fetch取回所有分支(branch)的更新.如果只想取回特定分支的更新,可以 ...

  4. UIScroll和UIPickView

    .h #import <UIKit/UIKit.h> #define WIDTH self.view.frame.size.width #define HEIGHT self.view.f ...

  5. 攻入Javascript，究竟什么是AJAX

    什么是AJAX 时隔半年,当AJAX再一次出现在我脑海中时,从最初的模糊到现在的越来越明确.那么究竟什么是AJAX?它和form表单提交有什么区别? 如果你使用过AJAX和表单提交的话,想必会发现一件 ...

  6. 基于LNMP的Zabbbix之PHP源码安装

    安装一些依赖的包 wget -c ftp://xmlsoft.org/libxml2/libxml2-2.7.8.tar.gz .tar.gz -C ../source/ cd ../source/l ...

  7. (简单) POJ 3126 Prime Path，BFS。

    Description The ministers of the cabinet were quite upset by the message from the Chief of Security ...

  8. 10、手把手教你Extjs5（十）自定义模块的设计

    从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下 ...

  9. 使用LIBUSB实现和自定义通讯设备通讯--MFC代码在末尾

    LIBUSB是一款简单好用的USB通讯开发库,一般HID设备用该库通讯能大大降低开发周期,使用如下,首先需要为设备安装驱动 在libusb的bin目录下有一个inf_wirzed.exe的文件,该文件 ...

  10. ucos事件邮箱信号量队列详解

    Ucos的事件分为时钟,信号量,互斥性信号量,消息队列,以及消息邮箱 首先说信号量 信号量在ucos中的类型定义为OS_EVENT_TYPE_SEM,在任务控制块ecb中,主要是用到的是信号量计数器O ...