<!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. 基于数据库MySQL的简易学生信息管理系统

    通过这几天学习Mysql数据库,对其也有了基本的了解,为了加深印象,于是就写了一个最简易的学生信息管理系统. 一:基本要求 1.通过已知用户名和密码进行登录: 2.可以显示菜单: 3.可以随时插入学生 ...

  2. svn客户端命令

    记几个常用的命令. 首次拉仓库时,先要进行检出(url可以带端口号): svn checkout http://svn.example.com:9834/repos svn checkout file ...

  3. Sep14学习笔记_pipe() & fork()

    第一次用博客园,昨晚编辑器一直没打开,今天打开了,把昨天的内容先补一下 关于parent和child之间的数据传输: If the parent wants to receive data from ...

  4. 【转】构建C1000K的服务器(1) – 基础

    原文来自 ideawu 构建C1000K的服务器(1) – 基础 著名的 C10K 问题提出的时候, 正是 2001 年, 到如今 12 年后的 2013 年, C10K 已经不是问题了, 任何一个普 ...

  5. Java笔记10-Object包装类型字符串

    提纲: 1.java.lang.0bject中常用方法介绍 2.基本类型对应的包装类型的介绍 以及基本类型和包装类型之间的相互转换 3.java.lang.String 字符串处理类 java.lan ...

  6. Spring JdbcTemplate方法详解

    JdbcTemplate主要提供以下五类方法: execute方法:可以用于执行任何SQL语句,一般用于执行DDL语句: update方法及batchUpdate方法:update方法用于执行新增.修 ...

  7. fastjson解析json,model字段有顺序要求吗

    解决办法已经写到我的公众号,二维码在下面,欢迎关注,谢谢. 本人联系方式: 更多精彩分享,可关注我的微信公众号: 若想给予我分享更多知识的动力,请扫描下面的微信打赏二维码,谢谢!: 微信号:Weixi ...

  8. About Flash

    Take SAMSUNG K9F1G08U0E for example, and use S3C2416, Windows CE5.0 platform. 要让Flash工作起来,包括两部分: Fla ...

  9. 第一篇（C#中?与??）

    不聊闲话,上干货~!(新手初上路,大牛莫喷,谢谢!) 先说?? 在C#中有个三元运算符  X= A==null?B:A 其中A为bool型.当A为空时,X的值为B;当A不为空时,X的值为A. 现在有个 ...

  10. Linux破解root密码

    实验环境                 虚拟机软件:VMware Workstation                 操作系统:Read Hat Enteprise 6.3      1.破解r ...