常见的锚点定位页面位置--页面位置滚动联动锚点的插件
使用
-
比如导航为:语文 数学:
语文数学回到顶部 -
需要有对应ID的html元素,比如:
-
js代码:
var buildBar = ;;
options
名称 | 是否必须 | 描述 |
---|---|---|
anchors | 必须 | 锚点列表数组 注意:锚点列表数组必须按位置从上到下的顺序排列 |
activeClass | 可选 | 当前锚点的class,默认为active |
autoHide | 可选 | 整个导航区域,是否是自动显示隐藏的。适合导航栏在右侧的情况,默认隐藏,往下滚动200px后显示 |
autoHideThreshold | 可选 | 往下滚动多少后进行显示 |
useFade | 可选 | 是否用fadeIn和fadeOut进行显示,默认false(用show()和hide()) |
sideBar | 可选 | 导航的容器元素。默认为$('.sidebar') |
依赖jquery
但项目中可能已经引入了jquery,所以不做硬性引入,以免版本不同造成的冲突。使用时请自行添加依赖
实现效果
1.点击锚点,页面可以滚动
2.页面滚动到某个位置时,其对应的导航将高亮(默认加上active的class)