代码

引入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. ShellExecute指定IE浏览器打开网页

    ShellExecute(NULL,L"open", L"iexplore.exe", L"www.baidu.com", NULL, SW ...

  2. typeof、instanceof与constructor

    typeof返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,string,object,undefined,function. 语法: typeof( ...

  3. django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.2的最佳处理方法,亲测可用

    django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.2 ...

  4. 循环中的自变量-break和continue

    1.break 作用:break 用于终止循环的执行, 过程:当执行到break语句后,程序将跳出循环,执行循环语句后边的代码 i=1 while i<10: if i==5: break pr ...

  5. 生日聚会Party——这个线性dp有点嚣张

    题目描述 今天是hidadz小朋友的生日,她邀请了许多朋友来参加她的生日party. hidadz带着朋友们来到花园中,打算 坐成一排玩游戏.为了游戏不至于无聊,就座的方案应满足如下条件:对于任意连续 ...

  6. API测试之Postman使用全指南(原来使用 Postman测试API如此简单)

    Postman Postman是一个可扩展的API开发和测试协同平台工具,可以快速集成到CI/CD管道中.旨在简化测试和开发中的API工作流. Postman 工具有 Chrome 扩展和独立客户端, ...

  7. dva的简介

    dva的定义 dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装; redux 他是react当中的仓库,如果熟悉vue的话,他的功能 ...

  8. pigctf期末测评

    pigctf期末测评 MISC 1 拿到图片,先binwalk一下,如下图 果然发现png图片后面跟了个ZIP,然后提取出来打开发现了一个flag.png,然后查看16进制文件没有发现什么问题,之后查 ...

  9. MYSQL 之 JDBC(九):增删改查(七)DAO的补充和重构

    DAO重构后的代码 package com.litian.jdbc; import org.apache.commons.beanutils.BeanUtils; import java.sql.*; ...

  10. python数据处理(二)之处理Excel文件

    代码与资料 https://github.com/jackiekazil/data-wrangling 1.安装相关包 2.解析Excel文件 在解析Excel之前应该想办法寻找替代的格式 3.开始解 ...