node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

scroll-intent

scroll-intent.js

Scroll-Intent is a micro library that does one thing perfectly: track whether a user is scrolling up or down. This is useful for tracking events and dealing with sticky or fixed elements.

Ever been annoyed by fixed headers which pop up if you accidentally touch your screen the wrong way? Or you scroll down but your finger drifts up just a little bit at the end and now your view is blocked by huge toolbars?

The key logic which makes this plugin special is its ability to ignore small movements. It will only change direction when the user scrolls a significant amount, when the user has intent to scroll in that direction.

Usage

Scroll-Intent is dead simple to use.

$(window).scrollIntent();

Scroll-intent will set the scroll-intent attribute on the <html> element to up or down:

<html scroll-intent="up">

or

<html scroll-intent="down">

Now you have a hook to use in your CSS.

[scroll-intent="down"] #my-fixed-header { display: none; }

It’s that simple! It just works. Perfectly. Like magic.

Example

JS Bin demo

In the wild

Dollarshaveclub Content

Notes

If you want to stop the scroll event handler when it is not needed (for optimal performance):

$(window).scrollIntent('off');