A jank-free module to do logic on the
onscroll event without performance regressions in @media-query like conditions.
Steady's main goal is to make the user scrolling jank-free. Below is an explaination on how Steady is working under the hood:
onscrollevent, that excutes the trackers (collecting numbers only).
requestAnimationFrameto avoid making the
onscrollhandler fat and slow, which will jank our scrolling.
donecallback is called by the handler. This will help you when you do async stuff.
onscrollhandler that collect values only, offloading the computations to
onscrollhandler to avoid calling it more than what we need.
bottom: you can use it to check did the user reach the bottom of the page/element yet? ( e.g. before reaching the end of the page by 200px start loading new content ). And it works of the scrollable elements and window!
top: how much did he scroll the window/element down?
width: viewport width, since your logic might change based on the viewport size
scrollLeft: this is for scrollable elements only, that collects how much did you scroll from the left of the element.
s.addCondition(condition): it gives the ability to add a condition on the fly. And
conditionis a string that works as the identifier of the condition (e.g
s.removeCondition(condition): same as the above but it removes the condition.
s.addTracker(conditionName, fn): a method to create custom trackers. look at the example below
s.stop: it removes the onScroll listener, this method is good for Single-Page applications whin switching between routes/views.
s.resume: reattaches the handler to the onScroll event. Example
conditions(Object): this is a key/value object that defines rules for the trackers. All trackers have
maxsuffix out of the box. It's like
handler(Function): a handler that gets called when the conditions are met, with two parameters:
values(Object): contains a key/value object, where the key is the name of the tracker and the value is it's value.
done(Function): a function that you call when you're done processing, this way you can make sure that your handler can't be called again while you process an async thingy ( e.g. waiting for an AJAX request to finish ).
[scrollElement](HTML Element): it gives you the ability to run Steady on a scrollable element instead of window. This property is optional that defaults to
[throttle](Number): the timeout delay in milliseconds, it's used to avoid calling the Steady onscroll handler more than we need to. This property is optional that defaults to 100 ms
$ npm install steady
$ bower install Steady.js
You can download the latest release from the github repo