Steady.js A jank-free module to do logic on the onscroll event without performance regressions in @media-query like conditions. Get Started Install Star on Github

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.

Features Tiny onscroll handler that collect values only, offloading the computations to requestAnimationFrame .

handler that collect values only, offloading the computations to . Throttling onscroll handler to avoid calling it more than what we need.

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

Instance methods 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 )

: it gives the ability to add a condition on the fly. And is a string that works as the identifier of the condition (e.g ) s.removeCondition(condition) : same as the above but it removes the 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

: 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.

: 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

Steady (options) Options: 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

( ): this is a key/value object that defines rules for the trackers. All trackers have and suffix out of the box. It's like but for event 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 ) .

( ): a handler that gets called when the conditions are met, with two parameters: [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

( ): it gives you the ability to run Steady on a scrollable element instead of window. This property is optional that defaults to . 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

Basic usage

Custom trackers

Scrollable element

Stop/Resume

Install NPM $ npm install steady Bower $ bower install Steady.js Download You can download the latest release from the github repo

Changelog 2.0.0 Fixing the leading delay in the throttle function #20 1.0.0 Deprecating scrollY , scrollX , and scrollTop

, , and New tracker top