navbar-builder
1.4.2 • Public • Published 常见的锚点定位页面位置--页面位置滚动联动锚点的插件
使用
-
比如导航为:语文 数学:
<div class="sidebar">
<a href="#yuwen">语文</a>
<a href="#shuxue">数学</a>
<a href="#gotop">回到顶部</a>
</div>
-
需要有对应ID的html元素,比如:
<div id="gotop"></div>
<div id="yuwen"></div>
<div id="shuxue"></div>
-
js代码:
var buildBar = require('navbar-builder');
buildBar({
"anchors": ['gotop', 'yuwen', 'shuxue'],
"activeClass": 'active',
"autoHide": true,
"autoHideThreshold": 200,
"useFade": false,
"sideBar": $(".sidebar")
});
options
名称 |
是否必须 |
描述 |
anchors |
必须 |
锚点列表数组 注意:锚点列表数组必须按位置从上到下的顺序排列 |
activeClass |
可选 |
当前锚点的class,默认为active |
autoHide |
可选 |
整个导航区域,是否是自动显示隐藏的。适合导航栏在右侧的情况,默认隐藏,往下滚动200px后显示 |
autoHideThreshold |
可选 |
往下滚动多少后进行显示 |
useFade |
可选 |
是否用fadeIn和fadeOut进行显示,默认false(用show()和hide()) |
sideBar |
可选 |
导航的容器元素。默认为$('.sidebar') |
依赖jquery
但项目中可能已经引入了jquery,所以不做硬性引入,以免版本不同造成的冲突。使用时请自行添加依赖
实现效果
1.点击锚点,页面可以滚动
2.页面滚动到某个位置时,其对应的导航将高亮(默认加上active的class)
示例界面
http://jsblog.cc/demo/ab/
有问题请联系:zhen0578@qq.com
Versions
Current Tags
- VersionDownloads (Last 7 Days)
- 1.4.2
2
Version History
Package Sidebar
Install
Weekly Downloads