<!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. Swift----函数 、 闭包 、 枚举 、 类和结构体 、 属性

    1 数组排序 1.1 问题 本案例实现一个整型数组排序的函数,数组排序的规则由传递的规则函数决定. 1.2 方案 首先定义一个整型数组排序函数sortInts,该函数有一个整型数组类型的参数,该参数必 ...

  2. 电脑重装BIOS设置中文翻译

  3. java 静态代理－积木系列

    代理模式的定义:Provide a surrogate or placeholder for another object to controlaccess to it(为其他对象提供一种代理以控制对 ...

  4. js之路

    开始记录js学习: udacity,edx上不去: 搞了一个html+css+JavaScript后开始看es6; 犀牛书,js启示录,你不知道的js上中: 第一个库jQuery及源码分析: --

  5. PHP Web实时消息后台服务器推送技术---GoEasy

    越来越多的项目需要用到实时消息的推送与接收,怎样用php实现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推送 ...

  6. java编程经验积累

    1.java批量删除checkbox中选中的对象-CSDN论坛-CSDN.NET-中国最大的IT技术社区  http://bbs.csdn.net/topics/360223125 2.重定向与转发路 ...

  7. 第五篇T语言实例开发,数组空间使用

    数组空间使用 排序算法 在实际中,当有多个无序数据时.我们就需要多数据进行排序 典型的排序:冒泡排序 排序原理 冒泡排序算法的运作如下:(从后往前) 比较相邻的元素.如果第一个比第二个大,就交换他们两 ...

  8. C#的提交表单方式主要有两种WebClient与HttpWebRequest

    根据黄聪:C#模拟网站页面POST数据提交表单(转) using System; using System.Collections.Generic; using System.IO; using Sy ...

  9. 在as3中使用protobuf

    在最近参与开发的adobe air项目中,前后端的通信协议从XML.JSON再到protobuf,最后选择protobuf原因,主要是前后端维护protobuf协议就行了,同时还可以利用IDE做一些编 ...

  10. tcpdf最新版 6.2版

    tcpdf6.2版,地址记 录 http://download.csdn.net/detail/hayywcy/9547873