编程 Javascript

Bootstrap Scrollspy源码学习

Posted in Javascript onMarch 02, 2017

本文实例为大家分享了Bootstrap Scrollspy插件的具体代码，供大家参考，具体内容如下

导航栏Scrollspy例子

<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
 <ul class="nav navbar-nav">
 <li><a href="#section1" rel="external nofollow" rel="external nofollow" >Section 1</a></li>
 ...
</nav>

<!-- Section 1 -->
<div id="section1">
 <h1>Section 1</h1>
 <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>

垂直Scrollspy例子

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

 <div class="container">
 <div class="row">
  <nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked">
   <li><a href="#section1" rel="external nofollow" rel="external nofollow" >Section 1</a></li>
   ...
  </ul>
  </nav>
  <div class="col-sm-9">
  <div id="section1"> 
   <h1>Section 1</h1>
   <p>Try to scroll this page and look at the navigation list while scrolling!</p>
  </div> 
  ...
  </div>
 </div>
 </div>

</body>

Scrollspy的使用

使用Scrollspy只需在对应的HTML元素里添加几个关键的属性：
- data-spy=”scroll”
添加到需要滚动的元素中，比如最常见的body元素，或者container。
- data-target=”selector”
添加到需要滚动的元素中，selector指示的是控制滚动的元素比如”.navbar”, “#myScrollspy”。
- <a href=”#section”>section</a>
在控制滚动的元素中用link链接到对应的位置。注意链接的id要跟对应位置元素的id相匹配。例如，<div id=”section1”>与<a href=”#seciton1”。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap Scrollspy源码学习

- Author -

alexZhangkai

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js通过地址栏给action传值(中文乱码全是问号)

May 02 Javascript

JavaScript 上万关键字瞬间匹配实现代码

Jul 07 Javascript

JAVASCRIPT模式窗口中下载文件无法接收iframe的流

Oct 11 Javascript

js简单实现HTML标签Select联动带跳转

Oct 23 Javascript

Json和Jsonp理论实例代码详解

Nov 15 Javascript

Eclipse去除js(JavaScript)验证错误

Feb 11 Javascript

javascript实现分栏显示小技巧附图

Oct 13 Javascript

jQuery插件Validate实现自定义校验结果样式

Jan 18 Javascript

jQuery使用模式窗口实现在主页面和子页面中互相传值的方法

Mar 01 Javascript

JavaScript实现实时更新系统时间的实例代码

Apr 04 Javascript

JS数组方法reverse()用法实例分析

Jan 18 Javascript

JS实现判断移动端PC端功能

Feb 21 Javascript

老生常谈jquery中detach()和remove()的区别

Mar 02 #Javascript

jQuery实用密码强度检测

Mar 02 #Javascript

通过npm引用的vue组件使用详解

Mar 02 #Javascript

完美解决spring websocket自动断开连接再创建引发的问题

Mar 02 #Javascript

vue-dialog的弹出层组件

May 25 #Javascript

在node.js中怎么屏蔽掉favicon.ico的请求

Mar 01 #Javascript

基于Bootstrap的网页设计实例

Mar 01 #Javascript

You might like

php实现telnet功能示例

2014/04/08 PHP

19个Android常用工具类汇总

2014/12/30 PHP

php保存任意网络图片到服务器的方法

2015/04/14 PHP

PHP利用二叉堆实现TopK-算法的方法详解

2017/04/24 PHP

作为PHP程序员你要知道的另外一种日志

2018/07/30 PHP

Yii2框架控制器、路由、Url生成操作示例

2019/05/27 PHP

jQuery对Select的操作大集合(收藏)

2013/12/28 Javascript

JavaScript实现存储HTML字符串示例

2014/04/21 Javascript

JavaScript实现的使用键盘控制人物走动实例

2014/08/27 Javascript

transport.js和jquery冲突问题的解决方法

2015/02/10 Javascript

JS实现单击输入框弹出选择框效果完整实例

2015/12/14 Javascript

微信小程序图片等比例缩放（图片自适应屏幕）

2016/11/16 Javascript

JS多文件上传的实例代码

2017/01/11 Javascript

Bootstarp 基础教程之表单部分实例代码

2017/02/03 Javascript

Angular实现可删除并计算总金额的购物车功能示例

2017/12/26 Javascript

JS实现的base64加密解密操作示例

2018/04/18 Javascript

angularjs1.5 组件内用函数向外传值的实例

2018/09/30 Javascript

Nodejs环境实现socket通信过程解析

2020/07/03 NodeJs

[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10

2020/12/12 DOTA

python实现忽略大小写对字符串列表排序的方法

2014/09/25 Python

django+xadmin+djcelery实现后台管理定时任务

2018/08/14 Python

matplotlib.pyplot绘图显示控制方法

2019/01/15 Python

对python中矩阵相加函数sum()的使用详解

2019/01/28 Python

对Python中class和instance以及self的用法详解

2019/06/26 Python

Python startswith()和endswith() 方法原理解析

2020/04/28 Python

python 实现非极大值抑制算法（Non-maximum suppression, NMS）

2020/10/15 Python

python爬取”顶点小说网“《纯阳剑尊》的示例代码

2020/10/16 Python

Python paramiko使用方法代码汇总

2020/11/20 Python

纯CSS实现聊天框小尖角、气泡效果

2014/04/04 HTML / CSS

CSS中的字体大小设置属性总结

2016/05/24 HTML / CSS

HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述

2013/01/30 HTML / CSS

大专计算机个人求职的自我评价

2013/10/21 职场文书

车间副主任岗位职责

2013/12/24 职场文书

群众路线教育实践活动的心得体会

2014/09/03 职场文书

Kubernetes关键组件与结构组成介绍

2022/03/31 Servers

CDPR谈《巫师》新作用虚幻5原因称不会为Epic独占

2022/04/06 其他游戏