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

2007/12/23更新创意无限,简单实用(javascript log)

Dec 24 Javascript

最近项目写了一些js，水平有待提高

Jan 31 Javascript

js中事件的处理与浏览器对象示例介绍

Nov 29 Javascript

Javascript玩转继承（二）

May 08 Javascript

基于Bootstrap+jQuery.validate实现Form表单验证

Dec 16 Javascript

Javascript的表单验证-初识正则表达式

Mar 18 Javascript

node+koa2+mysql+bootstrap搭建一个前端论坛

May 06 Javascript

基于Vue.js与WordPress Rest API构建单页应用详解

Sep 16 Javascript

Vue 解决多级动态面包屑导航的问题

Nov 04 Javascript

解决vue单页面应用进入页面加载所有 js 的问题

Aug 12 Javascript

小程序实现点击tab切换左右滑动

Nov 16 Javascript

JS中如何优雅的使用async await详解

Oct 05 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

1.PHP简介

2006/10/09 PHP

PHP的5个安全措施小结

2012/07/17 PHP

php的POSIX 函数以及进程测试的深入分析

2013/06/03 PHP

ThinkPHP的MVC开发机制实例解析

2014/08/23 PHP

PHP转盘抽奖接口实例

2015/02/09 PHP

PHP获取文件夹内文件数的方法

2015/03/12 PHP

mysql_connect localhost和127.0.0.1的区别（网络层阐述）

2015/03/26 PHP

YII动态模型(动态表名)支持分析

2016/03/29 PHP

php报错502badgateway解决方法

2019/10/11 PHP

2020最新版 PhpStudy V8.1版本下载安装使用详解

2020/10/30 PHP

jquery tools 系列 scrollable学习

2009/09/06 Javascript

EasySlider 基于jQuery功能强大简单易用的滑动门插件

2010/06/11 Javascript

JavaScript中的this关键字介绍与使用实例

2013/06/21 Javascript

JavaScript的Module模式编程深入分析

2013/08/13 Javascript

JavaScript中变量声明有var和没var的区别示例介绍

2014/09/15 Javascript

javascript中对变量类型的判断方法

2015/08/09 Javascript

javascript实现网站加入收藏功能

2015/12/16 Javascript

jquery自适应布局的简单实例

2016/05/28 Javascript

BootStrap智能表单实战系列(八)表单配置json详解

2016/06/13 Javascript

vue父组件向子组件传递多个数据的实例

2018/03/01 Javascript

浅谈JavaScript中你可能不知道URL构造函数的属性

2020/07/13 Javascript

vue+element获取el-table某行的下标,根据下标操作数组对象方式

2020/08/07 Javascript

Vue+Element自定义纵向表格表头教程

2020/10/26 Javascript

windows下python模拟鼠标点击和键盘输示例

2014/02/28 Python

Python合并两个字典的常用方法与效率比较

2015/06/17 Python

django接入新浪微博OAuth的方法

2015/06/29 Python

django2+uwsgi+nginx上线部署到服务器Ubuntu16.04

2018/06/26 Python

python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例

2020/02/28 Python

快速了解Python开发环境Spyder

2020/06/29 Python

采用冷却技术的超自然舒适度：GhostBed床垫

2018/09/18 全球购物

服装设计行业个人的自我评价

2013/12/20 职场文书

2014财务人员自我评价范文

2014/09/21 职场文书

给老婆道歉的话

2015/01/20 职场文书

英文诗歌翻译方法（赏析）

2019/08/16 职场文书

Python中递归以及递归遍历目录详解

2021/10/24 Python

mysql通过group by分组取最大时间对应数据的两种有效方法

2022/09/23 MySQL