Steady.js

How does it work?

Steady's main goal is to make the user scrolling jank-free. Below is an explaination on how Steady is working under the hood:

First, Steady attaches a handler to the onscroll event, that excutes the trackers (collecting numbers only).
Then it calls another function that checks the conditions with values inside a requestAnimationFrame to avoid making the onscroll handler fat and slow, which will jank our scrolling.
After that check, the function tries to see if the conditions are met. If they're met, it calls the handler with the values and the done function, otherwise it does nothing.
When the handler is called, Steady stops collecting values until the done callback is called by the handler. This will help you when you do async stuff.

Tiny onscroll handler that collect values only, offloading the computations to requestAnimationFrame.
Throttling onscroll handler to avoid calling it more than what we need.
Simple and reusable trackers that works like @media-query.
Built-in trackers:
- 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.
- ...and you can build your own trackers very easily!
Extendable trackers, you can simply roll your own trackers.
Stopping and resuming the onScroll handler

s.addCondition(condition): it gives the ability to add a condition on the fly. And condition is a string that works as the identifier of the condition (e.g top )
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 min and max suffix out of the box. It's like @media-query but for onscroll event
handler (Function): a handler that gets called when the conditions are met, with two parameters:
1. values (Object): contains a key/value object, where the key is the name of the tracker and the value is it's value.
2. 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 window. Demo
[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

By Khalid Lafi / @LafiKL