编程 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 相关文章推荐

javascript div 遮罩层封锁整个页面

Jul 10 Javascript

jQuery新闻滚动插件 jquery.roller.js

Jun 27 Javascript

js实现快速分享功能(你的文章分享工具)

Jun 25 Javascript

基于JavaScript代码实现微信扫一扫下载APP

Dec 30 Javascript

js实现上传图片预览方法

Oct 25 Javascript

javascript输出AscII码扩展集中的字符方法

Dec 26 Javascript

angular ng-repeat数组中的数组实例

Feb 18 Javascript

AngularJS 的$timeout服务示例代码

Sep 21 Javascript

详解微信小程序图片地扯转base64解决方案

Aug 18 Javascript

Echarts实现单条折线可拖拽效果

Dec 19 Javascript

JavaScript 替换所有匹配内容及正则替换方法

Feb 12 Javascript

jquery实现垂直手风琴菜单

Mar 04 jQuery

老生常谈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

索尼ICF-SW100收音机评测

2021/03/02 无线电

php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息

2011/05/04 PHP

ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法

2017/06/09 PHP

详解Yii2.0使用AR联表查询实例

2017/06/16 PHP

基于laravel缓冲cache的用法详解

2019/10/23 PHP

从JavaScript 到 JQuery (1)学习小结

2009/02/12 Javascript

Mootools 1.2教程滑动效果（Slide）

2009/09/15 Javascript

基于jquery的jqDnR拖拽溢出的修改

2011/02/12 Javascript

网页源代码保护(禁止右键、复制、另存为、查看源文件)

2012/05/23 Javascript

使用js+jquery实现无限极联动

2013/05/23 Javascript

js事件监听机制(事件捕获)总结

2014/08/08 Javascript

jQuery简单实现禁用右键菜单

2015/03/10 Javascript

浅析Bootstrap表格的使用

2016/06/23 Javascript

利用Angularjs和bootstrap实现购物车功能

2016/08/31 Javascript

jquery popupDialog 使用加载jsp页面的方法

2016/10/25 Javascript

Bootstrap实现提示框和弹出框效果

2017/01/11 Javascript

基于EasyUI的基础之上实现树形功能菜单

2017/06/28 Javascript

微信小程序获取javascript 里的数据

2017/08/17 Javascript

浅谈Vue父子组件和非父子组件传值问题

2017/08/22 Javascript

基于Vue2.0+ElementUI实现表格翻页功能

2017/10/23 Javascript

layui写后台表格思路和赋值用法详解

2019/11/14 Javascript

JS Thunk 函数的含义和用法实例总结

2020/04/08 Javascript

python爬取网站数据保存使用的方法

2013/11/20 Python

Python用Pillow(PIL)进行简单的图像操作方法

2017/07/07 Python

python sys.argv[]用法实例详解

2018/05/25 Python

python 模拟创建seafile 目录操作示例

2019/09/26 Python

Python算法中的时间复杂度问题

2019/11/19 Python

python二元表达式用法

2019/12/04 Python

解决Jupyter Notebook开始菜单栏Anaconda下消失的问题

2020/04/13 Python

Petmate品牌官方网站：宠物用品

2018/11/25 全球购物

来自世界各地的饮料：Flavourly

2019/05/06 全球购物

一加手机美国官方网站：OnePlus美国

2019/09/19 全球购物

双拥工作宣传标语

2014/06/26 职场文书

中国梦读书活动总结

2014/07/10 职场文书

指导教师推荐意见

2015/06/05 职场文书

三十年同学聚会致辞

2015/07/28 职场文书