编程 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使用replace()方法和正则表达式进行字符串的搜索与替换实例

Apr 10 Javascript

使用JavaScript 实现的人脸检测

Mar 24 Javascript

js+html5实现canvas绘制圆形图案的方法

Jun 05 Javascript

Sort()函数的多种用法

Mar 20 Javascript

js实现select二级联动下拉菜单

Apr 17 Javascript

基于JavaScript实现鼠标箭头移动图片跟着移动

Aug 30 Javascript

详解webpack 配合babel 将es6转成es5 超简单实例

May 02 Javascript

jQuery简单实现对数组去重及排序操作实例

Oct 31 jQuery

详解如何在react中搭建d3力导向图

Jan 12 Javascript

基于vue中解决v-for使用报红并出现警告的问题

Mar 03 Javascript

vue 实现通过手机发送短信验证码注册功能

Apr 19 Javascript

vue-router 源码之实现一个简单的 vue-router

Jul 02 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 图片上传代码

2011/09/13 PHP

浅谈PHP中的

2016/04/23 PHP

thinkPHP框架对接支付宝即时到账接口回调操作示例

2016/11/14 PHP

本地对象Array的原型扩展实现代码

2010/12/04 Javascript

克隆javascript对象的三个方法小结

2011/01/12 Javascript

JavaScript中常用的运算符小结

2012/01/18 Javascript

JavaScript的null和undefined区别示例介绍

2014/09/15 Javascript

JS实现样式清新的横排下拉菜单效果

2015/10/09 Javascript

js表单处理中单选、多选、选择框值的获取及表单的序列化

2016/03/08 Javascript

jQuery控制div实现随滚动条滚动效果

2016/06/07 Javascript

详解webpack 多入口配置

2017/06/16 Javascript

bootstrap table实现双击可编辑、添加、删除行功能

2017/09/27 Javascript

浅谈React高阶组件

2018/03/28 Javascript

详解puppeteer使用代理

2018/12/27 Javascript

在weex中愉快的使用scss的方法步骤

2020/01/02 Javascript

[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16

2019/08/19 DOTA

初学python数组的处理代码

2011/01/04 Python

简单介绍Python下自己编写web框架的一些要点

2015/04/29 Python

tensorflow 中对数组元素的操作方法

2018/07/27 Python

python中多个装饰器的执行顺序详解

2018/10/08 Python

基于wxPython的GUI实现输入对话框（1）

2019/02/27 Python

Python实现打砖块小游戏代码实例

2019/05/18 Python

Python socket处理client连接过程解析

2020/03/18 Python

基于Python的图像阈值化分割(迭代法)

2020/11/20 Python

奥地利汽车配件店：Pkwteile.at

2017/03/10 全球购物

Merrell美国官网：美国登山运动鞋品牌

2018/02/07 全球购物

c/c++某大公司的两道笔试题

2014/02/02 面试题

介绍一下代理模式(Proxy)

2014/10/17 面试题

运动会班级口号

2014/06/09 职场文书

乡镇党的群众路线对照检查材料

2014/09/24 职场文书

企业财务人员岗位职责

2015/04/14 职场文书

2015年生产车间工作总结

2015/04/22 职场文书

公司开除员工通知

2015/04/22 职场文书

创业开店，这样方式更合理

2019/08/26 职场文书

微信小程序中wxs文件的一些妙用分享

2022/02/18 Javascript

详解Anyscript开发指南绕过typescript类型检查

2022/09/23 Javascript