headroom

Headroom

Stable version 1.0.0 (Compatible with OutSystems 11)
Also available for 10
Published on 28 March 2017 by 
5.0
 (3 ratings)
headroom

Headroom

Details
Give your pages some headroom. Hide your header until you need it.
Read more

What's it all about?


Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.

Why use it?

Fixed headers are a popular approach for keeping the primary navigation in close proximity to the user. This can reduce the effort required for a user to quickly navigate a site, but they are not without problems…


Large screens are usually landscape-oriented, meaning less vertical than horizontal space. A fixed header can therefore occupy a significant portion of the content area. Small screens are typically used in a portrait orientation. Whilst this results in more vertical space, because of the overall height of the screen a meaningfully-sized header can still be quite imposing.

Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.


Sample: https://martinsda.outsystemscloud.com/Headroom_Sample



Credits to:

https://wicky.nillia.ms/headroom.js/

What’s new (1.0.0)

Initial version

Reviews (0)