singlePageNavigation

jQuery Single Page Navigation Plugin

jQuery plugin for single-page sites, which allows you to check the active item in the menu and smoothly scroll through the page.

Usage

$(".js-menu").singlePageNavigation({
	current : "active",
	duration : 500
});

Advanced Usage

$(".js-menu").singlePageNavigation({
	exceptClass : "menu__element_except",
	disabledClass : "menu__element_no-clickable",
	current : "active",
	duration : 500,
	delay : 300,
	ease : "swing",
	offset : header,
	offsetDynamic : 'innerHeight',
	scrollingOffsetBottom : 0.4, 
	changeAddress : false,
	currentClickable : true,
	beforeScrolling : function(){
		console.log("start scrolling");
	},
	finishScrolling : function(){
		console.log("finish scrolling");
	}
});

Options

Options	Description	Default values
exceptClass	Enter the class name of element(s) for except. This element(s) will clickable, but not shine when document is scrolling.	""
disabledClass	Class name of element(s) that disable. The element(s) will shine, but not clickable.	""
current	Class name of current nav item	"current"
duration	Scrolling speed (ms)	700
delay	A time before starting to scroll to selected position (ms)	0
ease	An animation type for scrolling	swing
offset	Offset from the top. It also can be JQuery element of (DOM) that will have different height on defferent window size (when user change itself window width, for example), so offset also will change dynamically. Values: [0-999xxx(px) / $("selector")]. Important: When we use JQuery element, we must set "offsetDynamic" option to any values - ["height" / "innerHeight" / "outerHeight"]	0
offsetDynamic	This option sets, which type of height we will use. I takes one of values from ["height" / "innerHeight" / "outerHeight" / false ]. Important: When we use this option, we must set "offset" option to JQuery element - [$("selector")]	false
scrollingOffsetBottom	Offset from the bottom. Values [0.00 - 1.00 - (in percents) (example: 0.45 == 45% of window height) / 1 - 999xxx (in px)]	0.4
changeAddress	It sets availabe to change address location when nav item clicked	false
currentClickable	Clickable of current nav element	false
beforeScrolling	Function that execute before scrolling	null
finishScrolling	Function that execute after scrolling is done	null

Demo

Demo