代码

引入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. tkinter的三种几何布局管理类

    1.pack() 主要采用块的方式组织子组件 如下: import tkinter root=tkinter.Tk() #创建窗口对象 label=tkinter.Label(root,text='h ...

  2. [NOI Online #2 提高组]涂色游戏 题解

    题目描述 你有 1020 个格子,它们从 0 开始编号,初始时所有格子都还未染色,现在你按如下规则对它们染色: 编号是 p1 倍数的格子(包括 0号格子,下同)染成红色. 编号是 p2 倍数的格子染成 ...

  3. JavaScript函数使用知识点回顾

    JS函数本质更像一个对象,有属性和方法. 将函数定义作为对象的属性,则称之为对象方法:函数如果用于创建新的对象,则称之为对象的构造函数. (1)JS使用关键字  function  定义函数. 函数可 ...

  4. [Mybatis]Mybatis常用操作

    Mybatis是目前国内比较流行的ORM框架,特点是可以写灵活的SQL语句,非常适合中小企业的面向数据库开发. 本文总结自己开发过程中常用的Mybatis操作. 一.插入操作 主键自增插入单条 < ...

  5. springmvc返回接口中long型，页面接收时值却变了

    Java序列化JSON时long型数值不准确 现象 项目中用到了唯一ID生成器.生成出的ID时long型的(比如说4616189619433466044).通过某个rest接口中返回json数据后,发 ...

  6. mysql Unknown error 1146

    错误提示:Couldn't acquire next trigger: Unknown error 1146 spring +quartz 实现任务调度,由于quartz 默认读取表名为大写,新建数据 ...

  7. Flask 基础组件（六）：Session

    除请求对象之外,还有一个 session 对象.它允许你在不同请求间存储特定用户的信息.它是在 Cookies 的基础上实现的,并且对 Cookies 进行密钥签名要使用会话,你需要设置一个密钥. 设 ...

  8. bzoj3381[Usaco2004 Open]Cave Cows 2 洞穴里的牛之二*

    bzoj3381[Usaco2004 Open]Cave Cows 2 洞穴里的牛之二 题意: RMQ问题.序列长度≤25000,问题数≤25000. 题解: 倍增. 代码: #include < ...

  9. DVWA(xss部分源码分析)

    前言 DVWA靶场都不陌生,最新学习xss,从新又搞了一遍xss部分,从源码方面康康xss的原因,参考了很多大佬的博客表示感谢,网上也有很多DVWA靶场教程,就水一篇吧. 更多web安全知识欢迎访问: ...

  10. 如何在项目中封装api

    一般在项目中,会有很多的api请求,无论在vue,angular,还是react中都应该把接口封装起来,方便后期的维护. 1.新建一个api文件 我们可以在项目的分目录下创建一个api文件夹,在这里面 ...