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.
$(".js-menu").singlePageNavigation({
current : "active",
duration : 500
});
$(".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 | 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 |