Create an Animated Sticky Navigation Menu with Vanilla JavaScript

When adding a navigation menu to a webpage, there are a lot of things to take into consideration. For example where to position it, how to style it, how to make it responsive. Or maybe you want to add some kind of animation to it (tastefully, of course). At this point you might be tempted to grab a jQuery plugin which does most of that for you. But that needn't be! It's actually pretty simple to create your own solution in a few lines of code.

In this post, I will demonstrate how to create an animated, sticky navigation menu with vanilla JavaScript, CSS and HTML. The final product will slide up out of your way as you scroll down the page, then slide back into view (with a stylish see-through effect) when you scroll back up. This is a technique used by such popular sites, such as Medium and Hacker Noon.

After reading you'll be able to employ this technique in your own designs, hopefully to great effect. There's a demo at the end of the article for the impatient.

The Basic HTML Structure

The following is the skeleton HTML code that we will be working with. Nothing too exciting going on here.

<div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">
        <!-- Navbar top row-->
      </div>
      <div class="nav">
        <!-- Links for navigation-->
      </div>
    </div>
  </div>

  <div class="content">
    <!-- Awesome content here -->
  </div>
</div>

Applying a Little Styling

Let's add some styling to the main elements.

Main Container

We'll need to remove any inherent browser styles and set the width of our container to 100%.

*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}

Banner Container

This is a wrapper around the navigation menu. It is always sticky and slides to hide or reveal the navigation menu as you scroll your page vertically. We are giving it a z-index value to ensure that it appears on top of the content.

.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}

Banner Section

This contains the navigation menu. Changes in position and background color are animated through the CSS transition property when a page is scrolled up or down.

Continue reading %Create an Animated Sticky Navigation Menu with Vanilla JavaScript%

by Albert Senghor via SitePoint