<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta name="viewport" content="width=device-width, initial-scale=1"/>

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

<title>滚动监听</title>

<style type="text/css">

    body{

        height: 2000px;

    }

    h2{

        height: 100px;

    }

    h3{

        height: 100px

    }

    #subNav{

        position: fixed;

        top: 0;

    }

    .nav a{

        color: #666;

    }

    .nav ul{

        display: none;

    }

    .nav .nav>li>a{

        padding: 5px 15px;

        padding-left: 35px;

    }

    .nav .active ul{

        display: block;

    }

    ul .active>a{

        border-left: 3px solid red;

        color: #a94442;

        font-weight: 600;

    }

    .nav .nav .active>a{

        border-left: 3px solid red;

        color: #428bca;

        padding-left: 32px;

    }

    .nav>li>a:hover{

        border-left: 1px solid red;

        color: #428bca;

        font-weight: 600;

        background-color: transparent;

        padding-left: 34px;

    }

</style>

</head>

<body data-spy="scroll" data-target="#subNav">

<div class="container">

    <div class="row">

        <div class="col-lg-9">

            <div class="section">

                <h2 id="gailan">概览</h2>

                <h3 id="dange">单个还是全局引入</h3>

                <p>JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。</p>

                <h3 id="data">data 属性</h3>

                <h3 id="biancheng">编程方式的 API</h3>

                <h3 id="bimian">避免命名空间冲突</h3>

                <h3 id="shijian">事件</h3>

                <h3 id="weidui">未对禁用 JavaScript 的浏览器提供补救措施</h3>

                <h3 id="disan">第三方工具库</h3>

            </div>

        </div>

        <div class="col-lg-3">

            <div id="subNav" class="navbar-collapse">

                <ul class="nav">

                    <li>

                        <a href="#gailan">概览</a>

                        <ul class="nav">

                            <li><a href="#dange">单个还是全部引入</a></li>

                            <li><a href="#data">data 属性</a></li>

                            <li><a href="#biancheng">编程方式的 API</a></li>

                            <li><a href="#bimian">避免命名空间冲突</a></li>

                            <li><a href="#shijian">事件</a></li>

                            <li><a href="#weidui">未对禁用 JavaScript 的浏览器提供补救措施</a></li>

                            <li><a href="#disan">第三方工具库</a></li>

                        </ul>

                    </li>

                </ul>

            </div>

        </div>

    </div>

</div>

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

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

</body>

</html>

效果图：

bootstrap-滚动监听的更多相关文章

  1. Bootstrap滚动监听(Scrollspy)插件

    Bootstrap滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标

  2. Bootstrap滚动监听

    滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...

  3. bootstrap 滚动监听 标签页 和 工具提示

    标签   <div class="container">     <h4>Tabs</h4>     <ul id="myTab ...

  4. Bootstrap-Plugin：滚动监听（Scrollspy）插件

    ylbtech-Bootstrap-Plugin:滚动监听(Scrollspy)插件 1.返回顶部 1. Bootstrap 滚动监听(Scrollspy)插件 滚动监听(Scrollspy)插件,即 ...

  5. 滚动监听（bootstrap）

    1.05 腊八节   一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...

  6. Bootstrap 下拉菜单和滚动监听插件

    一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

  7. bootstrap的滚动监听

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  8. Bootstrap入门（二十六）JS插件3：滚动监听

    很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...

  9. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  10. Bootstrap学习js插件篇之滚动监听

    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...

随机推荐

  1. SDK截图（四）：压缩位图实例

    这个问题研究了两天.<windows程序设计>中没有给出实例,MSDN也没有给出具体的例子.在知道,CSDN提问后,也没有得到答案.所以决定重新对DIB做一次彻底的研究,这大概会花去我一个 ...

  2. appium 执行demo

    appium很早就了解了,一直没有之际操作过,最近把官网的demo搞下来执行了一遍,还是很有意思的 经过测试是可以跑起来的,不过跑得过程中,输入法需要默认为英文的,如果是中文的码输入的时候有点问题,可 ...

  3. 关于ref的一点理解

    先写一段代码 class Test { public int Count { get; set; } } static void Main(string[] args) { Test test = } ...

  4. IntelliJ IDEA 工具常用快捷键

    IntelliJ IDEA是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构.J2EE支持.各类版本工具(git.svn.g ...

  5. ghj

    如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码 Update: Lorem ipsum dolor set 在CSS文件中,你已经定义了元素p,又定义了一个cla ...

  6. 错误集：js解析jQuery.post返回的xml之Could not find action or result

    js里用jQuery.post去后台查询数据,返回的是xml格式的数据流. js代码: var params = ""; params = encodeURI(params); v ...

  7. Surprise团队第三周项目总结

    Surprise团队第二周项目总结 项目进展 这周我们小组的项目在上周的基础上进行了补充,主要注重在注册登录界面的实现,以及关于数据库的一些学习. 在设计注册登录界面时,每一块的地方控件都不一样,比如 ...

  8. C#中的选择语句

    一.选择语句 if,else if是如果的意思,else是另外的意思,if'后面跟()括号内为判断条件,如果符合条件则进入if语句执行命令.如果不符合则不进入if语句.else后不用加条件,但是必须与 ...

  9. SSH基于Hibernate eventListener 事件侦听器的操作日志自动保存到数据库

    在spring xml配置文件中添加配置,包含:model.listener 在model中增加需要写入数据库对应表的model 在auditLog.xml配置文件中配置自己项目中,需要进行日志记录的 ...

  10. OpenGL角轴

    概述 轴旋转 角轴 概述 OpenGL旋转矩阵 旋转角度直接影响OpenGL GL_MODELVIEW矩阵的前三列,准确地说是向左.向上与向前三轴元素.例如,如果一沿X轴的单位向量(1,0,0)与任一 ...