编程 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类的定义

Jun 28 Javascript

解决Extjs4中form表单提交后无法进入success函数问题

Nov 26 Javascript

深入理解JavaScript中的传值与传引用

Dec 09 Javascript

parentElement,srcElement的使用小结

Jan 13 Javascript

JavaScript中的标签语句用法分析

Feb 10 Javascript

js中for in语句的用法讲解

Apr 24 Javascript

浅析javascript中的Event事件

Dec 09 Javascript

JS实现最简单的冒泡排序算法

Feb 15 Javascript

jQuery Validate表单验证插件实现代码

Jun 08 jQuery

js学习总结之dom2级事件基础知识详解

Jul 27 Javascript

基于ajax和jsonp的原生封装(实例)

Oct 16 Javascript

微信小程序使用npm支持踩坑

Nov 07 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通过curl模拟登陆DZ论坛

2015/05/11 PHP

php 批量查询搜狗sogou代码分享

2015/05/17 PHP

phpfpm的作用和用法

2019/10/10 PHP

php使用fputcsv实现大数据的导出操作详解

2020/02/27 PHP

通过onmouseover选项卡实现img图片的变化

2014/02/12 Javascript

拥Bootstrap入怀——导航栏篇

2016/05/30 Javascript

js判断是否为空和typeof的用法(详解)

2016/10/07 Javascript

有趣的bootstrap走动进度条

2016/12/01 Javascript

微信小程序开发之视频播放器 Video 弹幕弹幕颜色自定义实例

2016/12/08 Javascript

EasyUI学习之DataGird分页显示数据

2016/12/29 Javascript

微信小程序自定义对话框实例详解

2017/01/20 Javascript

Zepto实现密码的隐藏/显示

2017/04/07 Javascript

以BootStrap Tab为例写一个前端组件

2017/07/25 Javascript

JavaScript正则表达式函数总结（常用）

2018/02/22 Javascript

JavaScript使用闭包模仿块级作用域操作示例

2019/01/21 Javascript

Vue v-text指令简单使用方法示例

2019/09/19 Javascript

.netcore+vue 实现压缩文件下载功能

2020/09/24 Javascript

python实现可以断点续传和并发的ftp程序

2016/09/13 Python

Pycharm编辑器技巧之自动导入模块详解

2017/07/18 Python

python的文件操作方法汇总

2017/11/10 Python

用Pygal绘制直方图代码示例

2017/12/07 Python

python3使用scrapy生成csv文件代码示例

2017/12/28 Python

Python实现将Excel转换成xml的方法示例

2018/08/25 Python

基于Python实现拆分和合并GIF动态图

2019/10/22 Python

Django+RestFramework API接口及接口文档并返回json数据操作

2020/07/12 Python

RealTek面试题

2016/06/28 面试题

C#和SQL Server的面试题

2016/08/12 面试题

2014年班主任自我评价范文

2014/04/23 职场文书

门店业绩提升方案

2014/06/08 职场文书

学习教师敬业奉献模范事迹材料思想汇报

2014/09/19 职场文书

学术研讨会欢迎词

2015/01/26 职场文书

2015年全国爱耳日活动总结

2015/02/27 职场文书

小学公民道德宣传日活动总结

2015/03/23 职场文书

2015年技术工作总结范文

2015/04/20 职场文书

详解如何修改nginx的默认端口

2021/03/31 Servers

微信小程序基础教程之echart的使用

2021/06/01 Javascript