Header element that shrinks upon scrolling down to the main content

This requires the GSAP library.

Upon scrolling down and bringing the <main> element in to view, the header’s padding-block values will decrease and the logo will shrink in size. This allows the user’s viewport to seemingly increase because the sticky or fixed header is no longer taking up so much of the page height.

This example also includes the HTML CSS for a simple header, navigation menu, and masthead photo slideshow section — although the slideshow is non-functional in this case.

This example also includes JavaScript for setting the masthead photo slideshow section’s photo to take up the entire available height of the viewport so long as that is <=960px.

CodePen

JavaScript

const header = document.querySelector('#site-header');
const headerContainer = document.querySelector('#site-header .header-container');
const headerLogo = document.querySelector('.header-logo a');
const masthead = document.querySelector('.masthead-slideshow .glide');




// **************************************************
// Masthead Slideshow Height
// **************************************************
const setMastheadHeight = () => {
    // define header height
    const headerHeight = header != null ? header.offsetHeight : 0;
    
    // define viewport height
    let viewportHeight = window.innerHeight;

    // calculate masthead height
    let mastheadHeight = viewportHeight - headerHeight;

    // apply masthead height value to masthead element
    if (masthead) {
        masthead.style.height = mastheadHeight  + 'px';
    };
};
setMastheadHeight();




// **************************************************
//  GSAP Animations
// **************************************************
ScrollTrigger.matchMedia({
    "(min-width: 1361px)": function() {
      const tlMasthead = gsap.timeline({
          scrollTrigger: {
              trigger: 'main',
              toggleActions: "play none none reverse",
              markers: true
          }
      });
      tlMasthead.to(headerContainer, { paddingBlock: '20px' })
      .to(headerLogo, { width: '210px' }, '<')
    }
})
ScrollTrigger.matchMedia({
    "(max-width: 1360px)": function() {
      const tlMasthead = gsap.timeline({
          scrollTrigger: {
              trigger: 'main',
              toggleActions: "play none none reverse",
              markers: true
          }
      });
      tlMasthead.to(headerContainer, { paddingBlock: '8px' })
      .to(headerLogo, { width: '120px' }, '<')
    }
})

HTML

<header id="site-header">
    <div class="header-container">
        <div class="header-logo">
            <a href="/">
              <svg viewBox="0 0 138 26" fill="none" stroke="#fff" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" title="CodePen"><path d="M15 8a7 7 0 100 10m7-8.7L33 2l11 7.3v7.4L33 24l-11-7.3zm0 0l11 7.4 11-7.4m0 7.4L33 9.3l-11 7.4M33 2v7.3m0 7.4V24M52 6h5a7 7 0 010 14h-5zm28 0h-9v14h9m-9-7h6m11 1h6a4 4 0 000-8h-6v14m26-14h-9v14h9m-9-7h6m11 7V6l11 14V6"></path></svg>
            </a>
        </div>

        <div class="header-nav">
            <nav class="nav-traditional" aria-label="Navigation Menu">
                <ul>
                    <li class="nav-item standard"><a href="/" class="nav-link">About</a></li>
                    <li class="nav-item standard"><a href="/" class="nav-link">Services</a></li>
                    <li class="nav-item standard"><a href="/" class="nav-link">Portfolio</a></li>
                    <li class="nav-item standard"><a href="/" class="nav-link">Blog</a></li>
                    <li class="nav-item standard"><a href="/" class="nav-link">Contact</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<section id="site-masthead" role="complementary" aria-label="Photo Slideshow">
  <div class="masthead-slideshow">
    <div class="glide">
      <img src="https://images.unsplash.com/photo-1603312504738-3dd0fdaff23b" alt="">
    </div>
  </div>
</section>

<main>
    <section>
      <h1>Site Content</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio mollitia nostrum, praesentium provident officia odit possimus commodi blanditiis fugiat animi recusandae, necessitatibus assumenda cumque vel, molestias quo. Tempore nobis quos perspiciatis dignissimos recusandae id. Qui, veritatis. Eaque dolore adipisci dolores necessitatibus ducimus magni, inventore nobis, cumque maxime nam eius quae sint! Accusamus, enim! Placeat asperiores mollitia fugiat, consectetur illo provident nam dolores blanditiis non nulla nemo dignissimos praesentium voluptas, fuga vero voluptatum velit voluptate totam ad commodi. Iure beatae magnam exercitationem quod tenetur id. Eveniet error vel maxime adipisci quasi dolores repudiandae. Beatae repudiandae assumenda recusandae eius consequuntur itaque ut?</p>
  </section>
</main>

CSS

body {
  margin: 0;
  background-color: #000;
  color: #fff;
  font-family: 'Monterrat', sans-serif;
}

h1 {
  margin: 0;
  font-size: 3.5rem;
  line-height: 1.75;
}

p {
  font-size: 1.5rem;
  line-height: 1.75;
}




// **************************************************
//  Header
// **************************************************
header#site-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10000;
  background-color: #323233;
}




// **************************************************
//  Header Container
// **************************************************
.header-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2em;
  max-width: 1920px;
  margin-inline: auto;
  padding-block: 2.25em;
  padding-inline: 1em;

  @media (max-width: 1360px) {
    flex-direction: column;
  }
}




// **************************************************
//  Header Logo
// **************************************************
.header-logo {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  a {
    width: 420px;
  }

  img {
    display: block;
  }
}




// **************************************************
//  Header Nav
// **************************************************
.header-nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.nav-traditional {
  margin: 0;
  padding: 0;
  opacity: 1;
  display: block;

  >ul {
    display: flex;
    gap: 0.25em;
    margin: 0;
    padding: 0;
    list-style: none;

    >li {
      position: relative;

      >a {
        display: block;
        padding-block: 0.6em;
        padding-inline: 1.2em;
        color: #fff;
        font-size: 1.4rem;
        font-family: 'Montserrat', sans-serif;
        line-height: 1;
        font-weight: 400;
        text-decoration: none;
      }

      &.standard {
        >a {
          transition: all 0.5s;

          &:hover,
          &:focus{
            background-color: #5A5F73;
            color: #fff;
          }
        }
      }
    }
  }
}




// **************************************************
//  Masthead Slideshow
// **************************************************
#site-masthead {
  position: relative;
  background-color: #000;
}

.masthead-slideshow {
  .glide {
    max-height: 960px;
  }

  img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: none;
  }
}




// **************************************************
//  Main
// **************************************************
main {
  padding-block: 5em;
  padding-inline: 1em;

  section {
    width: min(100%, 1920px);
    margin-inline: auto;
  }
}