si

scroll-intent

Track user scroll direction without jitter.

Showing:

Popularity

Downloads/wk

17

GitHub Stars

9

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

16

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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');

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100