Track user scroll direction without jitter
Last updated 3 years ago by pwfisher .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install scroll-intent 
SYNC missed versions from official npm registry.


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.


Scroll-Intent is dead simple to use.


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

<html scroll-intent="up">


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


JS Bin demo

In the wild

Dollarshaveclub Content


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


Current Tags

  • 1.1.1                                ...           latest (3 years ago)

3 Versions

  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2016 © |