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”。

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

Javascript 相关文章推荐
js+html+css实现鼠标移动div实例
Jan 30 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 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实现Soap通讯的方法
2014/11/03 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
JS中操作JSON总结
2020/12/06 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
PyMongo安装使用笔记
2015/04/27 Python
python实现中文转换url编码的方法
2016/06/14 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
三好生演讲稿
2014/09/12 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
2014年图书室工作总结
2014/12/09 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
八年级数学教学反思
2016/02/17 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL