Screen real estate is valuable; we should optimize every pixel

Indrek Lasn
Sep 14 · 4 min read
Sticky navigation example

Every pixel matters, period. The more we optimize our pixel real estate, the happier our end user. Happier users spend more time on our applications and might even open their wallets as a token of gratitude.

A simple, yet effective way to optimize your application is to hide the header if the user is scrolling down. This gives the user more freedom to explore content since we have more space to show the content. If the user is scrolling up, we want to show the header. How do we achieve such a header? For this task, I chose the Headroom.js library for its simplicity.

headroom.js — https://github.com/WickyNilliams/headroom.js

Headroom.js

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, there’s less vertical than horizontal space. A fixed header can, therefore, occupy a significant portion of the content area. Small screens are typically used in portrait orientation. While 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.


Installing

Assuming you have set up your project already, install Headroom with yarn.

yarn install headroom.js

Or include the headroom.js library with a CDN:

<script    src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.10.2/headroom.min.js"></script>

Next, we’re going to need a file for our styles, a JavaScript file, and finally theindex.html file. Go ahead and create the three files.

touch style.css index.html index.js

HTML

Here’s how our index.html will look:

Notice we have our header with the classes headroom headroom-pinned headroom-unpinned — these classes are being applied conditionally, depending on the user action. E.g. if the user is scrolling up, we apply the headroom-pinned class, and if the user is scrolling downwards, we apply the headroom-unpinned class.


JavaScript

Next, open the index.js JavaScript file and initialize the headroom.js library.

Super simple. Here’s what we’re doing;

  • Import the CSS styles so we can style our header and application.
  • Import the Headroom library.
  • Select the header element inside our DOM.
  • Call the Headroom constructor with the header element and passing options to the constructor.
  • Initializing the headroom object. By calling the init method, we’re attaching event listeners to notify us about the user actions. The user actions can be scrolling up, or as in this case, scrolling down.

If you open the application and start scrolling, you should see the header element changing classes depending on the user action.

Header classes being swapped out depending on scroll action

Styles

Voila, now all we need to do is apply the styles depending on the classes.

There you go! That’s all we need. If the user is scrolling down, we’re animating the header away. If the user is scrolling up, we’re sliding the header in from up.

Scrollable header

Play with the demo here. Here’s the source code hosted on Github.

Sticky header interactive demo

If you’re new to JavaScript and want to learn the language, I recommend starting with reading books combined with building things. Start with the “A Smarter Way to Learn JavaScript” book and here’s a list of fun apps to build.

Thanks for reading. Happy coding, stay awesome!

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Engineer. Invest in yourself. Follow me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade