Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
PageSidebar for kissy
JavaScript CSS
branch: master

This branch is 10 commits ahead of Gourdboy:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
1.0
1.1
2.0.0
doc
.gitignore
Gruntfile.js
README.md
abc.json
package.json

README.md

PageSidebar

功能

  • 支持正向和逆向流程,可视区域内模块自动高亮
  • 支持自定义点击锚点后的滑动动画
  • 兼容浏览器默认行为

截图:

alt text

快速上手

第一步配置html代码():

<div class="nav" id="J_Nav">
    <p><a href="#J_Box1" class="J_PageNavigator">去box1的位置</a></p>
    <p><a href="#J_Box2" class="J_PageNavigator" data-navigator='{"threshold":20}'>去#J_Box2的位置偏移20个像素</a></p>
    <p><a href="#" class="J_PageNavigator" data-navigator='{"to":100}'>去Top:100px的位置</a></p>
</div>

javascript:

 var nav = new PageNavigator({
     node : '#J_Nav',
     navItemSelector : '.J_PageNavigator'
 });

配置参数

Attribute default Description
node null {Selector
navItemSelector .J_Navigator {String}导航子节点选择器,必须指定为a标签,推荐href设定为#id的形式,兼容浏览器默认行为
enableAutoSelect true 启用逆向流程:用户滚动页面时,自动高亮选中当前页面的第一个模块对应的导航链接
navSelectedClass .selected {String}高亮导航节点样式
interval 400 页面滚动时的监测的时间间隔,时间越短,性能越差
threshold 0 设定一个阀值,DOM.scrollTop()大于这个值时显示导航条

事件

Event When Payload
scrolling 点击导航页面开始滚动和结束滚动时触发 e.scrolling:{Boolean} 为true时开始滚动 false时结束滚动 e.data能拿到当前的navigator对象
afterVisibleChange 设定阀值后,显示隐藏导航节点时触发 e.newVal为true时表示显示
afterAcitveNavigatorChange 新的导航节点激活(高亮)时触发 e.newVal为navigator对象

方法

Method Description
setNavigatorsTop 如果导航的容器高度发生变化时,调用此方法重新计算容器高度
region 获取节点的region对象
viewportRegion 获取文档可视区域的region对象

changelog

V1.0

Something went wrong with that request. Please try again.