<!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. Launcher 壁纸

    0.添加壁纸: 在给系统换默认的壁纸的时候,需要修改一些地方: 首先是默认的壁纸,这个是在framework中配置的,所以要修改framework中找到drawable-nodpi(这个文件夹中的内容 ...

  2. win32自绘按钮，使用GDI+（三）

    解决前面的问题.实现鼠标移动进入到按钮的特效. 效果是这样的 鼠标移到按钮上,改变按钮的颜色(这里用的是直接换贴在按钮上的图片) 程序运行 鼠标进入按钮 代码 #ifndef ULONG_PTR // ...

  3. tinyxml一个优秀的C++ XML解析器

    读取和设置xml配置文件是最常用的操作,试用了几个C++的XML解析器,个人感觉TinyXML是使用起来最舒服的,因为它的API接口和Java的十分类似,面向对象性很好. TinyXML是一个开源的解 ...

  4. Day24_多线程第一天

    1.线程 1.概述      宏观来讲      进程:就是正在运行的程序      线程:就是进程的执行路径,执行单元 2.创建并启动线程的两种方式(掌握)      1.定义一个类继承Thread ...

  5. RubyGems 镜像

    Gem Source 命令:   gem sources -a http://gems.ruby-china.org   gem sources -l

  6. python 后台爆破工具

    sys:使用sys模块获得脚本的参数 queue模块,创建一个“队列”对象 time 模块     Python time time() 返回当前时间的时间戳(1970纪元后经过的浮点秒数). fin ...

  7. Flex 监听浏览器关闭

    在creationComplete的事件中,添加如下: if(ExternalInterface.available)//外部接口是否可用    {     var js:String= " ...

  8. FizzBuzz 问题

    public class FizzBuzz { static int start = 1; static int end = 100; public static void main(String[] ...

  9. 字符串hash算法

    http://www.cnblogs.com/zyf0163/p/4806951.html hash函数对大家来说不陌生吧 ? 而这次我们就用hash函数来实现字符串匹配. 首先我们会想一下二进制数. ...

  10. Live2D WebGL实现

    demo预览:http://www.kakinuma.date/l2d.html 官方:http://www.live2d.com/en/ sdk下载:https://link.zhihu.com/? ...