bootstrap-scrollspy
功能:用在导航栏上,用于滚动内容时动态对应导航标签
插件:scrollspy.js
要点:scrollspy用在导航栏、导航条上居多。body添加data-spy="scroll"的监听,在div class="js-navbar-scrollspy"包含其滚动显示的导航标签
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS & JS -->
<link rel="stylesheet" media="screen" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
<script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="../extlib/jquery-1.11.1.min.js"></script>
<!-- Local bootstrap CSS & JS -->
<script src="../bootstrap-3.3.5-dist/js/collapse.js"></script>
<script src="../bootstrap-3.3.5-dist/js/scrollspy.js"></script>
<script src="../bootstrap-3.3.5-dist/js/transition.js"></script>
<script src="../bootstrap-3.3.5-dist/js/dropdown.js"></script>
</head>
<body data-spy="scroll">
<div class="container"> <div class="row">
<!-- navbar-fixed-top 与 navbar-fixed-button 内容差不多 -->
<!-- 如果要使其随位置滚动而显示相应导航位置, 加上data-spy="scroll" -->
<!-- 不能加ul 中加上div ,只能另起div 里包含ul li -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header">
<a class="navbar-brand" href="#">Hello</a>
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Link</a>
</li>
</ul>
</div> <div class="collapse navbar-collapse js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#fat">fat</a></li>
<li><a href="#mdo">mdo</a></li> </ul> </div> </nav> </div> <h2 id="fat">@fat</h2>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<hr>
<h2 id="mdo">@mdo</h2>
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<hr> </div>
</body>
</html>
显示效果:

bootstrap-scrollspy的更多相关文章
- bootstrap插件学习-bootstrap.scrollspy.js
先看bootstrap.dropdown.js的结构 function ScrollSpy(){} //构造函数 ScrollSpy.prototype = {} //构造器的原型 $.fn.scro ...
- Angular 实现Bootstrap ScrollSpy控件
Bootstap是基于JQuery开发,Angular中不支持Bootstrap相关事件逻辑.本文基于Typecript开发了一个Angular可用的ScrollSpy控件.Scrollspy控件主要 ...
- 【转】bootstrap 的 affix.js 插件
我觉得 Twitter Bootstrap 提供的 JavaScript 插件可用性非常高,但文档多数简单.按部就班操作了,有效果当然好,没效果的话简直不知道为什么.之前我写过 Scrollspy 用 ...
- scrollspy.js--bug
/** * 20140505 14.33 ycx * scrollspy.js中存在的bug!!!---为什么ui.tabs必须在scrollspy.js中的window.onload之前执行,也就是 ...
- jquery更新后怎样在一个站点中使用两个版本号的jQuery
公司眼下的项目中的右側导航菜单用到了bootstrap(v3.2.0)的affix.js(Affix插件)与scrospy.js(滚动监听)插件, 须要用到版本号>= 1.9.0的jquery, ...
- Gruntfile.js模板
module.exports = function(grunt) { // 配置项 var AppConfig = { name: 'app', //源文件目录 src: 'app/src', //生 ...
- 前端自动化gulp遇上es6从 无知到深爱
Gulp是什么? Gulp是前端自动化的工具,但Gulp能用来做什么 1.搭建web服务器 2.使用预处理器Sass,Less 3.压缩优化,可以压缩JS CSS Html 图片 4.自动将更新变化的 ...
- Django项目:CRM(客户关系管理系统)--81--71PerfectCRM实现CRM项目首页
{#portal.html#} {## ————————46PerfectCRM实现登陆后页面才能访问————————#} {#{% extends 'king_admin/table_index.h ...
- Django项目:CRM(客户关系管理系统)--57--47PerfectCRM实现CRM客户报名流程02
图片另存为 16*16 名字修改为 bpm_logo.jpg /*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap.co ...
- Django项目:CRM(客户关系管理系统)--47--38PerfectCRM实现全局账号登录注销02
图片另存为 16*16 名字修改为 global_logo.jpg /*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap ...
随机推荐
- [JavaEE] Entity中Lazy Load的属性序列化JSON时报错
The server encountered an internal error that prevented it from fulfilling this request.org.springfr ...
- Java多线程问题总结
前言 Java多线程分类中写了21篇多线程的文章,21篇文章的内容很多,个人认为,学习,内容越多.越杂的知识,越需要进行深刻的总结,这样才能记忆深刻,将知识变成自己的.这篇文章主要是对多线程的问题进行 ...
- 修改oracle系统用户system的密码
C:\Users\Administrator>echo %ORACLE_SID% %ORACLE_SID% C:\Users\Administrator>set ORACLE_SID=or ...
- K米APP----案例分析
K米APP----案例分析 第一部分 调研,评测 第一次上手体验 软件的美工做得不错,功能排版很清楚,用户很容易上手,不至于用户不知道怎么用这个APP点歌 软件最主要的功能是KTV的点歌功能,这个功能 ...
- Linux下shell脚本中信号捕获和函数练习脚本之ping一个网段
该脚本主要的目的是练习在Linux bash脚本中捕获信号,顺便练习一下函数的使用,还有就是终止一个正在运行的程序后,该程序打开的文件的后续处理问题等等!脚本功能: ping一个网段内的IP,检测哪 ...
- Emmet (Zen Coding) 官方文档中HTML语法的总结
1. 嵌套操作---------- 子操作: > div>ul>li <div> <ul> <li></li> </ul> ...
- Struts学习总结-04 上传文件
1. upload.jsp <%@ page language="java" import="java.util.*" pageEncoding=&quo ...
- Saltstack数据系统Grains和Pillar(三)
Saltstack数据系统 分为Grains和Pillar 一.Grains 静态数据,当Minion启动的时候收集的MInion本地的相关信息.(包含操作系统版本.内核版本.CPU.内存.硬盘.设备 ...
- css012 css布局简介
css012 css布局简介 一. 网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二. 如何进行css布局 1.强大的<div>标签 网页的h ...
- mysql-python
sudo pip install MySQL-python centos安装 python-dev包提示No package python-dev available: 出现此问题的原因是python ...