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

你的顶栏导航,添加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. PLSQL开发笔记和小结

    *****************************************  PLSQL基本结构*****************************************基本数据类型变 ...

  2. 定时且周期性的任务研究II--ScheduledThreadPoolExecutor

    http://victorzhzh.iteye.com/blog/1011635 上一篇中我们看到了Timer的不足之处,本篇我们将围绕这些不足之处看看ScheduledThreadPoolExecu ...

  3. Milk Pails

    Milk Pails 题目描述 Farmer John has received an order for exactly M units of milk (1≤M≤200) that he need ...

  4. angularJs-UI-bootstrap系列教程2(According)

    废话不说上代码 angular.module('MyApp', ['ngAnimate', 'ngTouch', 'ui.bootstrap']) .controller('accordionCtrl ...

  5. 说说Android应用的persistent属性

    转载地址:http://my.oschina.net/youranhongcha/blog 摘要 在Android系统中,有一种永久性应用.它们对应的AndroidManifest.xml文件里,会将 ...

  6. CentOS 6.4 x64 安装 配置 Redmine 2.4.1

    Redmine 安装配置 1. 安装Redmine 所需的依赖 首先安装 yaml wget http://pyyaml.org/download/libyaml/yaml-0.1.4.tar.gz ...

  7. 用HTML 格式导出Excel

    只需按照如下格式写就可,在<head> 里面嵌套table,必须修改html的命名空间,加上一些描述.保存为xls文件 <html xmlns:x="urn:schemas ...

  8. [bzoj1195] [hnoi2006] 最短母串

    本题是一个经典的状压dp问题,在紫书中有着加强版的例题. 本题的难度主要体现在:如何输出字符串字典序最小. 为了解决这个问题,我们有两种常用方案: 1) 我们可以采用bfs输出路径的方法,使用+1来输 ...

  9. Qt下libusb-win32的使用(转)

    源:Qt下libusb-win32的使用(一)打印设备描述符 主要是在前一篇的基础上,学习libusb-win32的API使用.程序很简单,就是打印指定USB设备的设备描述符(当然其他描述符也是可以的 ...

  10. NSDate详解及获取当前时间等常用操作

    NSDate类用于保存时间值,同时提供了一些方法来处理一些基于秒级别时差(Time Interval)运算和日期之间的早晚比较等. 1. 创建或初始化可用以下方法 用于创建NSDate实例的类方法有 ...