frender / fscrollspy.js

屏幕滚动插件，参考bootstrap的scrollspy.js，进行了定制以及拓展，增加了事件的监听

fScrollspy.js - 屏幕滚动插件

这个插件参考bootstrap的scrollspy.js，在使用上进行了定制和拓展。

Initialize

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);
	}
});

Example

link：http://frender.github.io/fScrollspy.js

Options

• 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

监听屏幕向上滚动的事件

Installation

bower install fScrollspy.js [--save[-dev]]

or

npm install fscrollspy.js [--save[-dev]]

##Version

• 1.0.0