scrollin-up.js

Hide content when scrolling down,
show it when scrolling up

What?

Scrollin Up is useful for “context-based hiding” to enhance the user’s focus and save screen space (like Chrome or Firefox on Android hiding the navigation bar when you’re scrolling down and showing it back when scrolling up).

How to use?

Add <script src="scrollin-up.min.js"></script> before </body>

scrollin-up.js adds a class .su--ready to <body> when the user is scrolling down.
When he’s scrolling up this class is replaced by .su--scrollinUp

Near the top of the page (half initial height), the class is changed back to .su--ready

Use the .su--scrollinUp in your CSS 

/* show navigation at the top when scrolling up */
.su--scrollinUp .showMeWhenScrollinUp{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* share button */
.su--scrollinUp .shareLinks{
    position: fixed;
    bottom: 0;
    left: 0;
}

/* back to top link at bottom */
.su--scrollinUp .backToTop{
    position: fixed;
    bottom: 0;
    right: 0;
}

The code

On GitHub : Gist on GitHub feel free to comment & help me improve it!

scrollin-up.js

minified version

Pascal Cauhépé, @eQRoeil

Test with your mobile:
qrcode to this page

Share :