代码

引入bootstrap.js 和bootstrap.css两个文件

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例</title>

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

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>

        body {

            position: relative;

        }

        ul.nav-pills {

            top: 20px;

            position: fixed;

        }

        div.col-sm-9 div {

            height: 250px;

            font-size: 28px;

        }

        #section1 {color: #fff; background-color: #1E88E5;}

        #section2 {color: #fff; background-color: #673ab7;}

        #section3 {color: #fff; background-color: #ff9800;}

        #section41 {color: #fff; background-color: #00bcd4;}

        #section42 {color: #fff; background-color: #009688;}

        @media screen and (max-width: 810px) {

            #section1, #section2, #section3, #section41, #section42  {

                margin-left: 150px;

            }

        }

    </style>

</head>

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

<div class="container">

    <div class="row">

        <nav class="col-sm-3" id="myScrollspy">

            <div class="container-fluid">

            <div class="container-fluid">

            <ul class="nav nav-pills nav-stacked">

                <li class="active"><a href="#section1">Section 1</a></li>

                <li><a href="#section2">Section 2</a></li>

                <li><a href="#section3">Section 3</a></li>

                <li class="dropdown">

                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>

                    <ul class="dropdown-menu">

                        <li><a href="#section41">Section 4-1</a></li>

                        <li><a href="#section42">Section 4-2</a></li>

                    </ul>

                </li>

            </ul>

            </div>

            </div>

        </nav>

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

            <div id="section1">

                <h1>Section 1</h1>

                <p>Try to scroll this section and look at the navigation list while scrolling!</p>

            </div>

            <div id="section2">

                <h1>Section 2</h1>

                <p>Try to scroll this section and look at the navigation list while scrolling!</p>

            </div>

            <div id="section3">

                <h1>Section 3</h1>

                <p>Try to scroll this section and look at the navigation list while scrolling!</p>

            </div>

            <div id="section41">

                <h1>Section 4-1</h1>

                <p>Try to scroll this section and look at the navigation list while scrolling!</p>

            </div>

            <div id="section42">

                <h1>Section 4-2</h1>

                <p>Try to scroll this section and look at the navigation list while scrolling!</p>

            </div>

        </div>

    </div>

</div>

</body>

</html>

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

  1. bootstrap的滚动监听

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

  2. 利用bootstrap制作滚动监听

    滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标. 在这里,需要引入三个文件:bootstrap.min.css      jquery-3.3.1.j ...

  3. vue插件——滚动监听 vue-scrollwatch

    造轮子的目的: 做项目的时候需要一个滚动监听的功能,html结构已经都写好了,不想使用vue组件的方式来写,因为不想改造html结构,于是花了几个小时做了一个简单的,使用vue指令方式来做的,项目上够 ...

  4. Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)

    详情请查看 http://aehyok.com/Blog/Detail/26.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:h ...

  5. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  6. Bootstrap滚动监听

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

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

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

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

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

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

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

随机推荐

  1. Centos 6.4 安装KSnapshot 和gimp截图工具

    一. # wget http://www.ibiblio.org/pub/Linux/X11/xutils/ksnapshot-0.2.7.tar.gz # tar -zxvf ksnapshot-0 ...

  2. linux简单介绍

    Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统. linux基本思想有两点,1.一切都是文件:2.每个软件有确定 ...

  3. SpringMVC的项目架构思想

    SpringMVC的项目架构思想 一.DO和Model的区别 DO是对数据库表的映射.Model是处理业务逻辑的模型(领域模型).例如:用户信息表和用户密码表分别是两个DO,但是对于实体用户来说,密码 ...

  4. css中input与button在一行高度不一致的解决方法

    在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码: <style> input,button{ width:100px; h ...

  5. MySQL实验 内连接优化order by+limit 以及添加索引再次改进

    MySQL实验 内连接优化order by+limit 以及添加索引再次改进 在进行子查询优化双参数limit时我萌生了测试更加符合实际生产需要的ORDER BY + LIMIT的想法,或许我们也可以 ...

  6. 「疫期集训day2」高地

    硝烟从凡尔登高地的东方升起...我只知道这里会发生世界上前所未有的一次战役------凡尔登的法军士兵 今天运气挺好,早自习刚复习完数论和二分图,考试时又复习了状压和Tarjan 于是乎成绩惨不忍睹 ...

  7. day04 python入门（变量，基本数据类型）

    python入门学习 来自egon的学习套路 在每次遇到一个新事物的时候,要学三步: xxx是什么? 为什么要有xxx? ​ 大前提:python中所有出现的语法都是为了让计算机能够具有人的某一个功能 ...

  8. python进阶之内置方法

    python进阶之内置方法 字符串类型的内置方法 常用操作与方法: 按索引取值 str[index] 切片 ste[start:stop:step] 长度 len(str) 成员运算in和not in ...

  9. Scala 基础（七）：Scala 运算符

    1 算术运算符 算术运算符(arithmetic)是对数值类型的变量进行运算的,在Scala程序中使用的非常多. 细节说明: 1)对于除号“/”,它的整数除和小数除是有区别的:整数之间做除法时,只保留 ...

  10. 数据可视化之PowerQuery篇（十一）使用Power BI进行动态帕累托分析

    https://zhuanlan.zhihu.com/p/57763423 上篇文章介绍了帕累托图的用处以及如何制作一个简单的帕累托图,在 PowerBI 中可以很方便的生成,但若仅止于此,并不足以体 ...