编程 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 SHA-1：Secure Hash Algorithm

Dec 20 Javascript

JQuery 操作Javascript对象和数组的工具函数小结

Jan 22 Javascript

js下获取div中的数据的原理分析

Apr 07 Javascript

把input初始值不写value的具体实现方法

Jul 04 Javascript

jquery等宽输出文字插件使用介绍

Sep 18 Javascript

写JQuery插件的基本知识

Nov 25 Javascript

jQuery树插件zTree使用方法详解

May 02 jQuery

浅析为什么a="abc" 不等于 a=new String("abc")

Oct 25 Javascript

vue router动态路由下让每个子路由都是独立组件的解决方案

Apr 24 Javascript

vue如何判断dom的class

Apr 26 Javascript

Node.js中你不可不精的Stream（流）

Jun 08 Javascript

JS实现快递单打印功能【推荐】

Jun 21 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上传文件中文文件名乱码的解决方法

2013/11/01 PHP

Laravel 5框架学习之路由、控制器和视图简介

2015/04/07 PHP

js传值判断

2006/10/26 Javascript

在网站上应该用的30个jQuery插件整理

2011/11/03 Javascript

使用js检测浏览器的实现代码

2013/05/14 Javascript

jquery的ajax简单结构示例代码

2014/02/17 Javascript

angularjs 表单密码验证自定义指令实现代码

2016/10/27 Javascript

扩展jquery easyui tree的搜索树节点方法(推荐)

2016/10/28 Javascript

DropDownList实现可输入可选择（两种版本可选）

2016/12/07 Javascript

jQuery学习笔记之入门

2016/12/14 Javascript

详解vue之页面缓存问题(基于2.0)

2017/01/10 Javascript

jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例

2017/01/30 Javascript

微信小程序图片加载（本地，网路）实例详解

2017/03/10 Javascript

BootStrap注意事项小结（五）表单

2017/03/10 Javascript

js编写选项卡效果

2017/05/23 Javascript

webpack踩坑之路图片的路径与打包

2017/09/05 Javascript

写给小白看的JavaScript异步

2017/11/29 Javascript

webpack中使用iconfont字体图标的方法

2018/02/22 Javascript

vue 点击按钮实现动态挂载子组件的方法

2018/09/07 Javascript

vue-cli3+ts+webpack实现多入口多出口功能

2019/05/30 Javascript

[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局

2016/02/26 DOTA

Python绑定方法与非绑定方法详解

2017/08/18 Python

python Django中的apps.py的目的是什么

2018/10/15 Python

Python使用pandas和xlsxwriter读写xlsx文件的方法示例

2019/04/09 Python

python实现代码统计器

2019/09/19 Python

python3的UnicodeDecodeError解决方法

2019/12/20 Python

浅谈TensorFlow之稀疏张量表示

2020/06/30 Python

Python异常处理机制结构实例解析

2020/07/23 Python

用python查找统一局域网下ip对应的mac地址

2021/01/13 Python

椰子猫砂：CatSpot

2018/08/27 全球购物

澳大利亚领先的时尚内衣零售商：Bras N Things

2020/07/28 全球购物

半年思想汇报

2013/12/30 职场文书

餐饮管理自我介绍信

2014/01/15 职场文书

无房产证房屋转让协议书合同样本

2014/10/18 职场文书

Python import模块的缓存问题解决方案

2021/06/02 Python

MySQL count(*)统计总数问题汇总

2022/09/23 MySQL