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.
$(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.
If you want to stop the scroll event handler when it is not needed (for optimal performance):
$(window).scrollIntent('off');