代码

引入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. Java设计模式十九——责任链模式

    责任链模式 老李的苦恼 每个人在出生的时候,都早已在暗中被标好了三六九等. 老李是一名建筑工地的木匠,和大多数生活在社会最底层的农民工一样,一辈子老实本分,胆小怕事.在他们的心中,谁当老爷都没有区别, ...

  2. 基于 fetch 的请求封装

    原生 fetch 请求失败后(如无网络)状态会变成 reject 走 .catch .绝大多数情况下业务场景只需要给个 toast 等简单处理.每个请求都 .catch 会显得格外繁琐,并且如果不 . ...

  3. 一.2.序列化使用之用户资源功能app

    1.环境准备:(1).新建功能app: (python36env) [vagrant@CentOS7 devops]$ python manage.py startapp users ---建议以后用 ...

  4. 113资讯网：安装程序进入Admin后台出现：SQLSTATE[HY000] [1045] Access denied for user'root'@'localhost' (using password: YES)

    各项设置设置正确,就是出现这种原因! 1.config.inc.php解决办法: 修改phpMyAdmin的配置文件里的密码设置,进入phpMyAdmin的安装目录,找到config.inc.php配 ...

  5. Flutter 中渐变的高级用法

    Flutter 中渐变有三种: LinearGradient:线性渐变 RadialGradient:放射状渐变 SweepGradient:扇形渐变 看下原图,下面的渐变都是在此图基础上完成. Li ...

  6. Web移动端 自适应缩放界面

    在开发App端的网页时,要适配iphone.ipad.ipod.安卓等各种机型,一般是直接使用em.px转em.界面缩放. 本章是通过将界面缩放,等比例显示在各机型上.过程中遇到了些问题和大坑~ 然后 ...

  7. 最简单的博弈论——HDU - 5963 朋友 (博弈)

    OK,好的先看一下题意: B君在围观一群男生和一群女生玩游戏,具体来说游戏是这样的: 给出一棵n个节点的树,这棵树的每条边有一个权值,这个权值只可能是0或1. 在一局游戏开始时,会确定一个节点作为根. ...

  8. Emergency Evacuation 题解

    The Japanese government plans to increase the number of inbound tourists to forty million in the yea ...

  9. 准备开始了解orchardcore，有兴趣的一起啊

    orchardcore网上的资料真是少,开始看源码,目前遇到的最大问题是不知道ModuleName属性如何自动注入到OrchardCore.Cms.Web的程序集Assembly上面,等这个搞通了估计 ...

  10. day35 作业

    服务端 import subprocess import struct import json from socket import * server = socket(AF_INET, SOCK_S ...