How to Create a Fixed Header Which Animates on Page Scroll

In this tutorial, we’ll learn how to create a pattern seen on many websites these days: a fixed header which animates to a less obtrusive state as we scroll down the page. We’ll start with the basic structure, then get things working using CSS and pure JavaScript. Before closing, we’ll briefly cover how we can optimize our code as well as discussing challenges present when applying this kind of pattern to touch devices.

To get an idea of what we’re going to build, here’s the demo (you may prefer fullscreen view):

HTML Markup

We’ll start this exercise with the following markup–a header, containing a <nav> and a couple of other nested elements:

<header>
  <nav>
    <h1>
      <a href="" class="logo">Logo</a>
    </h1>
    <ul>
      <li>
        <a href="">About</a>
      </li>
      <li>
        <a href="">Services</a>
      </li>
      <li>
        <a href="">Portfolio</a>
      </li>
      <li>
        <a href="">Contact</a>
      </li>
    </ul>
    <button class="toggle-menu" aria-label="Responsive Navigation Menu">☰</button>
  </nav>
</header>

<main>
  <!-- content here -->
</main>

The nav element, which is part of the header, contains three elements; the logo, the main menu, and a placeholder button to trigger a responsive menu (below 1061px).

Note: If you click on this button, nothing much will happen. Creating the responsive menu is beyond the scope of this tutorial.

Initial CSS Styles

Now let’s have a look at some CSS styles to get things moving:

header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: #DD3543;
}

nav {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  transition: align-items .2s;
}

.logo {
  font-size: 2rem;
  display: inline-block;
  padding: 20px 30px;
  background: #F35B66;
  color: #fff;
  margin: 50px 0 0 50px;
  transition: all .2s;
}

ul {
  display: flex;
  margin: 50px 50px 0 0;
  padding: 0;
  transition: margin .2s;
}

li:not(:last-child) {
  margin-right: 20px;
}

li a {
  display: block;
  padding: 10px 20px;
}

.toggle-menu {
  display: none;
  font-size: 2rem;
  color: #fff;
  margin: 10px 10px 0 0;
  transition: margin .2s;
}

main {
  display: block;
  padding: 0 20px;
}

Here’s a brief explanation of the most important rules here:

The header element is a fixed positioned element.
We use flexbox to layout the nav element.
The logo has margin-top: 50px and margin-left: 50px. Additionally, we give it padding: 20px 30px.
The main menu mirrors the logo, with margin-top: 50px and margin-right: 50px.
The responsive link button is hidden. It becomes visible when the viewport width is less than 1061px. Moreover, we set its top and right margins to 10px.
We add the transition property to the elements whose property values will change in the future. In this way, we achieve a smooth transition effect between the initial state and the final state.

With these rules in place, the header looks like this:

Animating the Header

So far we’ve built the basic structure of our header. It’s now time to discuss the next steps:

The main element should be positioned right underneath the header. Remember that the header has positioned: fixed, and it’s therefore positioned on top of the main element.
The header should be animated as we scroll down the page.

To solve the first task, we add a padding-top property to the main element. The value of this property should be equal to the header’s height. In our case, we haven’t specified a fixed height for our header, so we’ll use some JavaScript to calculate it, and then add the corresponding padding to the main element.

To solve the second task, we’ll do the following:

Retrieve the number of pixels that the document has already been scrolled vertically.
If this number is greater than 150px, we assign the scroll class to the header.

JavaScript

Here’s the required JavaScript code–we begin by defining some variables, calculating the height of the header, then adding that value as padding-top to the main element:

var m = document.querySelector("main"),
    h = document.querySelector("header"),
    hHeight;

function setTopPadding() {
  hHeight = h.offsetHeight;
  m.style.paddingTop = hHeight + "px";
}

For this demonstration, we use the offsetHeight property to retrieve the header’s height. Keep in mind that we could equally have used the getBoundingClientRect() method. It’s worth mentioning that this method may return fractional values.

Now onto the scrolling event:

function onScroll() {
  window.addEventListener("scroll", callbackFunc);
  function callbackFunc() {
    var y = window.pageYOffset;
    if (y > 150) {
      h.classList.add("scroll");
    } else {
      h.classList.remove("scroll");
    }
  }
}

Here we take advantage of the window’s pageYOffset property to calculate the number of pixels that our document has been scrolled vertically. Note that this property doesn’t work in older versions of IE (< 9). However, if you want to support any of these versions, a workaround is available here.

Then we use the classList property to add and remove the scroll class from our header. Not all browsers support this property however, so if you want to support any of these you may want to look at the classList.js and classie.js polyfills. For this example, we could have used the className property to manipulate our single class, but in a real-world scenario this might not the ideal solution (in case we have multiple classes).

To wrap things up, we call our functions in two different cases:

When the page loads
and as we resize the browser window.

window.onload = function() {
  setTopPadding();
  onScroll();
};

window.onresize = function() {
  setTopPadding();
};

CSS

As long as our scrolling exceeds the limit of 150px, a few additional CSS rules take place:

.scroll {
  box-shadow: 0 7px 0 0 rgba(0, 0, 0, .1);
}

.scroll .logo {
  padding: 10px 20px;
  font-size: 1.5rem;
}

.scroll nav {
  align-items: center;
}

.scroll .logo,
.scroll ul,
.scroll .toggle-menu {
  margin: 0;
}

Specifically, we make the following changes:

Add a light gray box shadow to the header.
Reduce the logo’s padding and font size.
Change the alignment for the flex items across the cross-axis.
Remove the margin from the logo, the menu, and the responsive link button.

The aforementioned rules result in this new header layout:

How the header looks like when our scrolling exceeds the limit of 150px

Going Responsive

As we’ve mentioned in a previous section, when the viewport width is less than 1061px, we hide the menu and show the responsive link button (which doesn’t actually do anything). Plus, we make a few other changes in the target elements.

Below you can see the initial appearance of the responsive header:

How the responsive header initially looks like

Here are the related CSS rules:

@media screen and (max-width: 1060px) {
  header {
    padding: 10px;
  }
  nav {
    align-items: center;
  }
  ul {
    display: none;
  }
  .logo {
    font-size: 1.8rem;
    margin: 10px 0 0 10px;
  }
  .toggle-menu {
    display: block;
  }
}

And here’s the header’s appearance once it’s been animated:

How the responsive header looks like when our scrolling exceeds the limit of 150px

Performance Considerations

Now that we managed to give our header the desired behavior, let’s go one step further and discuss a few things about performance.

In our example, the code that manipulates the header’s animation (i.e. callbackFunc) is executed when the scroll event fires. This means it can be triggered hundreds of times or more. This may result in performance issues, especially when the callbackFunc function contains a lot of stuff that should be done as we scroll up and down the page. In our specific case we’re dealing with a simple animation, but imagine a real-world scenario where we want to do more complex things like re-positioning elements and so on.

So what can we do about this? Well, there are many possible solutions, but for now let’s briefly discuss one of them. Specifically, we want to allow our function to be executed at most once every 200 milliseconds (this is an arbitrary value). To implement this functionality, we’ll take advantage of Lodash, a modern JavaScript utility library. This library provides the throttle function we need.

First, we include the library (happily there’s also the option to incorporate only the desired function) in our project, then we replace this code:

window.addEventListener("scroll", callbackFunc);

with this:

window.addEventListener("scroll", _.throttle(callbackFunc, 200));

To understand the difference, let’s make a simple test. We’ll initialize a counter that is incremented each time the callbackFunc function is triggered.

Now try to scroll up and down the page. When you do so, you’ll notice that the counter’s value changes roughly every 200ms. Next, repeat this process without using Lodash. You’ll notice that the counter’s value changes much faster.

Again, although this optimization seems unnecessary for our simple example, you should take it into consideration when you’re dealing with expensive and repetitive tasks.

In the same way, we could have optimized the resize event listener.

Browser Support

This effect works in most recent browsers and devices. However, the experience isn’t ideal in all mobile devices (e.g. iOS devices). This happens because the scroll event behaves differently on desktop browsers compared to mobile devices. For example, on a desktop browser the scroll event fires continuously, whereas on an iPad it occurs when you swipe and release your finger.

Knowing the issues above, you should decide whether or not it’s a sensible pattern to use on your web pages.

Conclusion

In this tutorial, we created a fixed header which is animated as we scroll down the page. I hope you liked the demo and you’ll use it as inspiration in your coming projects!