Smart Sticky Header Navigation with Vanilla JavaScript – Shrinking Header

Preview:

Description:

Shrinking Header is a vanilla JavaScript library for creating a sticky header navigation that will auto shrink itself as you scroll down the page.

How to use it:

Create a header navigation for your website.

<div class="topHeader">
  <div id="headerContainer" class="expandMe expanded">
    <nav >
      <ul class="primaryMenu">
        <li><a href="#top" class="selected">Home</a></li>
        <li><a class="link" href="#about">About</a></li>
        <li><a class="link" href="#geckos">Buy Now</a></li>
        <li><a class="link" href="#contact">Contact Us</a></li>
      </ul>
    </nav>
  </div>
</div>

Add the required CSS styles to the header navigation.

.topHeader {
  width: 100%;
  z-index: 11;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
  height: auto;
  background-color: rgba(255, 255, 255, 1);
}
.expandMe {
  transition: all 0.5s ease 0.1s;
}
.expanded {
  padding: 50px 0;
}
@media only screen and (min-width: 64.063em) {
    
  .topHeader {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
  }
  
  nav ul {
    margin-bottom: 0;
    margin-left: 1rem;
  }
    
  .primaryMenu li {
     display: inline-block;
  }
  .primaryMenu li a {
     display: block;
     padding: 30px 18px;
     font-size: 1rem;
  }
}

Load the JavaScript file sticky-header.js on the webpage where needed. That’s it.

<script src="js/sticky-header.js"></script>