How to Animate a “Full-Screen Section to Fixed Header” on Page Scroll

In this new tutorial, we’ll start with a full-screen section with a heading and learn how to animate it to a fixed page header on scroll. This type of effect is ideal for layouts with hero sections like a landing or a single post page.

What We’re Building

Here’s what we’re going to create (scroll to test the behavior, or check out the full-screen version):

1. Begin With the Page Markup (HTML)

We’ll define two sections:

The first section will be full-screen and contain a heading and page header. By default, only the heading will appear. Inside the header, we’ll position the logo and menu.
The second section will include some dummy content. Below this section, we can have many more.

Here’s the markup:

<section class="first">
  <h1>Full-Screen Section to Fixed Header</h1>
  <header class="page-header">
    <nav class="nav">
      <a href="" class="logo-wrapper uk-flex uk-flex-middle">
        <img width="178" height="38" src="forecastr-logo-white.svg" alt="forecastr logo">
      </a>
      <ul>
        <li>
          <a href="">Home</a>
        </li>
        <li>
          <a href="">About</a>
        </li>
        <li>
          <a href="">Contact</a>
        </li>
      </ul>
    </nav>
  </header>
</section>
<section class="second">
  <div class="container">...</div>
</section>

2. Set the Main Styles (CSS)

Let’s take note of the main styles—you can see all of them by clicking on the CSS tab of the demo project:

The first section will be a fixed-positioned element and full-screen. Additionally, it’ll behave as a grid container with vertically centered content. You can alter the height of the first section through the hero-height CSS variable. For instance, if you want this section to cover only half of the screen, change the CSS value from 100vh to 50vh.

Layout with a hero section that covers half of the viewport height

As we’ve done many times in the past, we’ll use CSS Grid to stack the heading and page header. To do so, we’ll give them grid-area: 1/1. This is the shorthand of setting grid-column: 1 and grid-row: 1.
As we’ve already discussed, the page header will initially be invisible. To do so, we’ll give it opacity: 0 and visibility: hidden. The last rule is required to prevent click events.
The nav element will be a flex container with vertically centered content. On large screens, the logo will sit on the left side and the menu on the right side. On small screens (≤600px), we’ll stack them.

The nav layout on large screensThe nav layout on mobile screens

The second section should sit underneath the first one. To accomplish this, we’ll give it padding-top: 110vh. This value matches the height of the first section (100vh) plus 10vh to create the gap between the text and the section’s top edge (equal to the bottom padding). If we don’t give it any padding-top value, the second section will sit behind the first section at the top of the page. Remember that the first section is a fixed-positioned element, and thus it’s removed from the normal document flow.

The second section’s position without adding a padding-top value

Here are the main styles:

/*CUSTOM VARIABLES HERE*/

.first {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hero-height);
  background: url(mountain-full.jpg) no-repeat center / cover;
  background-blend-mode: multiply;
  display: grid;
  place-items: center;
  z-index: 1;
}

section,
.first > * {
  transition: all 0.6s;
}

.first > * {
  grid-area: 1/1;
  padding: 0 20px;
  width: 100%;
}

.first .page-header {
  opacity: 0;
  visibility: hidden;
}

.first .nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.first .nav ul {
  display: flex;
  list-style: none;
}

.second {
  padding: calc(var(--hero-height) + 10vh) 0 10vh 0;
}

@media (max-width: 600px) {
  .first .nav {
    flex-direction: column;
    justify-content: center;
  }
}

3. Animate on Scroll (JavaScript)

As we start scrolling down the page, we‘ll toggle the is-sticky class of the body element.

At that point, the following actions will take place:

We’ll smoothly decrease the height of the first section from 100vh to 90px. Again, you can alter the value of the sticky header height through the sticky-header-height CSS variable. In addition, we’ll assign it a background color that will blend with its image and result in a purple (darker) image. Notice in the CSS above that this section has background-blend-mode: multiply.
We’ll smoothly reveal the page header and hide the heading.
We’ll smoothly decrease the padding-top value of the second section from 110vh to 90px + 10vh.
We’ll sync the animations of all elements. Notice in the CSS above that their animation duration will be 0.6s.
We’ll define the ::before pseudo-element of the body element that will append a box shadow to the page header.

Here’s the required JavaScript code:

const body = document.body;
const toggleClass = "is-sticky";

window.addEventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll > 0) {
    body.classList.add(toggleClass);
  } else {
    body.classList.remove(toggleClass);
  }
});

And the associated styles:

/*CUSTOM VARIABLES HERE*/

.is-sticky::before {
  content: "";
  position: fixed;
  top: 65px;
  left: 0;
  width: 100%;
  height: 15px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.7);
}

.is-sticky .first {
  height: var(--sticky-header-height);
  background-color: var(--purple);
}

.is-sticky .first h1 {
  opacity: 0;
  visibility: hidden;
}

.is-sticky .first .page-header {
  opacity: 1;
  visibility: visible;
}

.is-sticky .second {
  padding-top: calc(var(--sticky-header-height) + 10vh);
}

Conclusion

Another scrolling tutorial came to an end, folks! During this exercise, we covered how to transform a full-screen section to a sticky header on a page scroll by toggling just one class. Hopefully, this implementation was clear enough and inspired you to utilize it on an upcoming project! Of course, you can build on it and add some extra features like adding parallax functionality on scroll by changing perhaps the first section’s background position.

Let’s look again at our creation:

Last but not least, don’t forget to look at the Tuts+ library for more header effects tutorials on scroll.

As always, thanks a lot for reading!