这个插件参考bootstrap的scrollspy.js,在使用上进行了定制和拓展。
var scrollspy = new Scrollspy({
scrollElement: window,
offset: 45,
selector: '.nav-list a',
activeCls: 'on',
reachSelector: function() {
$('.nav-list').css({
position: 'fixed',
top: 0,
left: 0,
zIndex: 999
});
},
leaveSelector: function() {
$('.nav-list').css({
position: 'static'
});
},
reachTarget: function() {
if (!$('.nav-list').is(':visible')) {
$('.nav-list').show();
}
},
leaveTarget: function() {
if ($('.nav-list').is(':visible')) {
$('.nav-list').hide();
}
},
scrollDown: function() {
$('#directionTips').text('scrolling down').fadeIn(400);
},
scrollUp: function() {
$('#directionTips').text('scrolling up').fadeIn(400);
}
});
link:http://frender.github.io/fScrollspy.js
- scrollElement
@String or @DOMElement
监听滚动的元素,默认为window
- offset
@Number
偏移量,为到达监听对象前后设置一个过渡距离
- selector
@String or @DOMElement
选择器,在这里为监听滚动事件的导航元素
- activeCls
@String
选中状态下的导航元素的class
- reachSelector
@Function
监听选择器到达最顶部的监听对象的事件
- leaveSelector
@Function
监听选择器离开最顶部的监听对象的事件
- reachTarget
@Function
监听选择器进入监听对象区域的事件
- leaveTarget
@Function
监听选择器离开监听对象区域的事件
- scrollDown
@Function
监听屏幕向下滚动的事件
- scrollUp
@Function
监听屏幕向上滚动的事件
bower install fScrollspy.js [--save[-dev]]
or
npm install fscrollspy.js [--save[-dev]]
##Version
- 1.0.0