代码

引入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. myeclipse集成jad反编译步骤

    (1) 将jad.exe放到java的jdk\bin目录下(2) 将jadeclipse插件net.sf.jadclipse_3.3.0.jar 拷贝到myeclipse安装目\Common\plug ...

  2. Docker入门——理解Docker的核心概念

    1 前言 相信不少人听过这么一句话: 人类的本质是复读机. 在软件开发领域也一样,我们总是想寻找更好地方式复制优秀的逻辑或系统.最核心的方法是抽取通用逻辑和组件,把差异化的东西接口化或配置化,达到复用 ...

  3. css文字不透明度怎么设置？

    在css中有很多好看的样式都可以实现,css设置出来的样式让整个网页看起来也会非常美观,今天的这篇文章就给大家来介绍一下在css中怎么设置文字的透明度,让你的文字在网页中看起来是透明的. CSS设置透 ...

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

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

  5. PE文件结构详解（三）

    0x01 前言 上一篇讲到了数据目录表的结构和怎找到到数据目录表(DataDirectory[16]),这篇我们我来讲讲数据目录表后面的另一个结构——区块表. 0x01 区块 区块就是PE载入器将PE ...

  6. UDP/TCP 流程与总结

    1 UDP流程 前序:可以借助网络调试助手工具进行使用 1 UDP 发送方 1 创建UDP套接字 2 准备目标(发送方) IP和端口 3 需要发送的数据内容 4 关闭套接字 from socket i ...

  7. WPF中国地图

    实现鼠标移动到某个地区显示Popup弹框 1,地图 <Grid Margin="0,0,0,0" Grid.Row="1"> <Path St ...

  8. day25 ATM项目（第一天）

    项目的说明书 项目:ATM + 购物车 项目需求: 1.额度15000或自定义 --> 注册功能 2.实现购物商城,买东西加入购物车,调用信用卡接口结账 --> 购物功能.支付功能 3.可 ...

  9. JavaScript的参数是按照什么方式传递的？

    1.基本类型传递方式 <script> var a = 1; function test(x) { x = 10; console.log(x); } test(a); // consol ...

  10. java 基本语法（一） 关键字与标识符

    1.java关键字的使用定义:被Java语言赋予了特殊含义,用做专门用途的字符串(单词)特点:关键字中所字母都为小写具体哪些关键字: 2.保留字:现Java版本尚未使用,但以后版本可能会作为关键字使用 ...