<!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. 【JS】数字转大写中文

    原文参考 逛到一道面试题,数字转大写中文的,搜索学习并记录于此. //自动转换数字金额为大小写中文字符,返回大小写中文字符串,最大处理到999兆 function changeMoneyToChine ...

  2. 用GO扫描图片像素,复制图片

    关键是使用image.image/png.image/color包 // main.go package main import ( "fmt" "bufio" ...

  3. python数据结构

      . 数据结构¶ .1. 深入列表¶ 链表类型有很多方法,这里是链表类型的所有方法: list.append(x) 把一个元素添加到链表的结尾,相当于 a[len(a):] = [x] . list ...

  4. eclipse界面混乱

    在eclipse最右边点击Java----reset

  5. 升级OpenSSh到 7.3p1

    1.开启 telnet 服务 Linux yum install -y telnet-server telnet /etc/xinet.d/telnet 中的yes 修改为no service xin ...

  6. AOP 手动，半自动，全自动

    dao层 package com.yaorange.dao; public interface StudentDao { public void saveStudent(); public void ...

  7. python 使用总结

    本人原来是编写java的,后来转到编写ios之后,最后又来编写python了.相对于其他的一些开发人员来说,我精通的语言还是比较杂的. 这里将几个语言进行类比,比较一些个人的看法的东西. 首先obje ...

  8. 解决href标签跳转到WEB-INF下的jsp页面的办法

    用的配置struts的action的方法. jsp页面这样写的. class里面的路径是下面的struts配置文件的路径 struts配置文件里这样写的. name里面的内容要和href里面的内用一致 ...

  9. java项目调用kettleJob和Trans

    1.调用本地Job和Trans 较简单不用多说没有遇到任何问题,以下是代码: import org.pentaho.di.core.KettleEnvironment; import org.pent ...

  10. xmlstreaml xml过滤 格式化 报文的发送接收 struct2

    有时候把东西想的过于复杂了,还是思路不清晰啊. seervlet struct2配置过程