Smart Sticky Header Navigation with Vanilla JavaScript – Shrinking Header

Category: Javascript , Menu & Navigation | September 15, 2015
Views Total:3,270 views
Official Page:Go to website
Last Update:September 15, 2015


Smart Sticky Header Navigation with Vanilla JavaScript – Shrinking Header


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>

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>

You Might Be Interested In:

Leave a Reply