代码

引入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. 初至cnblogs —— 博客搬迁

    感觉写博客是一种总结.分享知识的有效方式,于是打算坚持通过博客这一载体来提升自己. 最初通过 Hexo + GitHub Page 来搭建个人博客,但是通过这种方式搭建的博客基本没有访问量.个人感觉没 ...

  2. DevOps研发模式下「产品质量度量」方案实践

    在当今互联网环境下,需求变更越来越快,交付周期却越来越短, 怎么判断一个系统是否测试充分? 产品质量满足什么样的条件才能投产? 如何判断测试工作.研发团队工作的效率是高还是低? 这些问题不能靠感觉.拍 ...

  3. 12 . Kubernetes之Statefulset 和 Operator

    Statefulset简介 k8s权威指南这样介绍的 "在Kubernetes系统中,Pod的管理对象RC.Deployment.DaemonSet和Job都面向无状态的服务.但现实中有很多 ...

  4. Netty 源码解析（四）: Netty 的 ChannelPipeline

    今天是猿灯塔“365篇原创计划”第四篇. 接下来的时间灯塔君持续更新Netty系列一共九篇 Netty 源码解析(一): 开始 Netty 源码解析(二): Netty 的 Channel Netty ...

  5. 美国6w刀的远程工作高级工程师职位,说下在线评估, 倒在第一阶段, 认知能力测试?智商不够怎么办?!

    前几天刚被裁员了, 然后在Linkedin上面看到一个crossover的senior software engineer的职位,写的可以remote, 6w刀, 我第一次参加这个公司的这种在线测试, ...

  6. 每日一题 - 剑指 Offer 38. 字符串的排列

    题目信息 时间: 2019-06-29 题目链接:Leetcode tag:深度优先搜索 回溯法 难易程度:中等 题目描述: 输入一个字符串,打印出该字符串中字符的所有排列. 你可以以任意顺序返回这个 ...

  7. centos7-解决vim无法找到问题

    vim编辑器是Linux中的强大组件,是vi编辑器的加强版 在Linux命令行输入vim时提示:-bash:vim:common not found,之后按着查询到的解决办法整好了:   解决步骤如下 ...

  8. 数据库周刊31丨openGauss 正式开源；7月数据库排行榜发布；浙江移动国产数据库AntDB迁移；oracle ADG跨版本搭建；PG解决社保问题；mysqlbinlog解析……

    摘要:墨天轮数据库周刊第31期发布啦,每周1次推送本周数据库相关热门资讯.精选文章.干货文档. 热门资讯 1.openGauss 正式开源,华为公开发布源代码[摘要]6月1日,华为正式宣布开源数据库能 ...

  9. day82 序列化器-Serializer

    目录 一.序列化器的基本功能 二.定义序列化器 三.创建Serializers对象 四.序列化器的使用 1 序列化 2 反序列化 2.1 数据验证(类比forms组件) 2.2 数据保存 一.序列化器 ...

  10. Jetbranis学习资料之全家桶

    相信很多小伙伴,用的代码编辑器很多都是Jetbrains的,但好东西不可能免费的,而且找了很多激活码都是失效总是莫名其妙的就过期了.下面分享一个不错的激活码地址,比其他的应该更加可靠.本人实测目前支持 ...