This time I will share jQuery Plugin and tutorial about jQuery Plugin To Spy Scrolling Events – ScrollWatch, hope it will help you in programming stack.
| File Size: | 12.7 KB |
|---|---|
| Views Total: | 2152 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
ScrollWatch is a robust, customizable jQuery scrollspy plugin that determines active page sections you’re looking at and highlights the corresponding nav links on vertical page scrolling. Works both with the scrollable container and the whole document.
How to use it:
1. Include both jQuery library and the jQuery ScrollWatch plugin right before the closing body tag.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="src/scrollwatch.js"></script> |
2. Attach the ScrollWatch to given sections.
1 |
// selections: selector or an array of elements |
2 |
// callback: function to invoke when the focus changes |
3 |
// options: option array |
4 |
$(sections).scrollWatch(callback, options) |
3. Assign an ‘Active’ class to nav links as you scroll down the webpage.
1 |
// $(sections).scrollWatchMapTo(items, activeClass, options) |
2 |
$('section').scrollWatchMapTo('ul.menu > li', null, { |
3 |
resolutionMode: 'focus-line', |
4 |
viewMarginTop: 53 |
5 |
}); |
1 |
<ul class="menu"> |
2 |
<li><a href="#s1">Section 1</a></li> |
3 |
<li><a href="#s2">Section 2/a></li> |
4 |
<li><a href="#s3">Section 3</a></li> |
5 |
... |
6 |
</ul> |
4. All possible customization options.
01 |
{ |
02 |
03 |
// DOM element to spy scrolling events |
04 |
scroller: null, |
05 |
06 |
// True: the callback is invoked only when the active section changes |
07 |
// False: the callback is invoked on every pulse (e.g. on scroll and resize). |
08 |
throttle: true, |
09 |
10 |
// height - section that is occupying the largest portion of the view is chosen |
11 |
// focus-line - section that is directly intersecting or is closest to the focus line is chosen |
12 |
// custom - use a custom resolver |
13 |
// none - no resolution is performed (all candi<a href="https://www.jqueryscript.net/time-clock/">date</a>s will be passed to the callback) |
14 |
resolutionMode: 'height', |
15 |
16 |
// Function to invoke when a focus candidate resolution is needed. |
17 |
// It must choose and return a single focus object. |
18 |
resolver: null, |
19 |
20 |
// in pixels |
21 |
topDownWeight: 0, |
22 |
viewMarginTop: 0, |
23 |
viewMarginBottom: 0, |
24 |
stickyOffsetTop: 5, |
25 |
stickyOffsetBottom: 5, |
26 |
27 |
// Percentage of the view height that determines position of the focus line |
28 |
focusRatio: 0.38196601125010515, |
29 |
30 |
// Offset added to position of the focus line position after focusRatio is applied |
31 |
focusOffset: 0, |
32 |
33 |
// Debug mode |
34 |
debugFocusLine: false |
35 |
|
36 |
} |
This awesome jQuery plugin is developed by ShiraNai7. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
