Hide in scroll navigation (without jQuery) is a JavaScript solution to create smart site navigation that automatically hides on scroll down and reveals itself again on scroll up.

navbar fixed top after scrolling, top navigation bar, sticky navigation bar on scroll codepen, drop down menu bar in html, sticky navigation bar on scroll css

Simple One Page Scroll Navigation ES6 Vanilla.js Library | slide-nav

How to make use of it:

1. Create normal navigation in the address like this:

<header class="header-navigation" id="header">
  <nav>
    <a class="link" href="#" title="Home">Home</a>
    <a class="link" href="#" title="About">About</a>
    <a class="link" href="#" title="Contact">Contact</a>
  </nav>
</header>

2. Make header navigation static on page load.

.header-navigation {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #333;
  text-align: center;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

3. Shows JavaScript to show/hide the navigation in the header depending on the position of the scroll.

var new_scroll_position = 0;
var last_scroll_position;
var header = document.getElementById("header");
window.addEventListener('scroll', function(e) {
  last_scroll_position = window.scrollY;
  // Scrolling down
  if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {
    // header.removeClass('slideDown').addClass('slideUp');
    header.classList.remove("slideDown");
    header.classList.add("slideUp");
  // Scrolling up
  } else if (new_scroll_position > last_scroll_position) {
    // header.removeClass('slideUp').addClass('slideDown');
    header.classList.remove("slideUp");
    header.classList.add("slideDown");
  }
  new_scroll_position = last_scroll_position;
});

4. Apply smooth up/down sliding motions to head navigation.

.slideUp {
  -webkit-transform: translateY(-100px);
  transform: translateY(-100px);
  transition: transform .5s ease-out;
}
.slideDown {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition: transform .5s ease-out;
}

Smart Fixed Top Navigation, Hide on scroll navbar (no jQuery) Plugin/Github

See Demo And Download

Official Website(samcorin): Click Here

This superior jQuery/javascript plugin is developed by samcorin. For extra advanced usage, please go to the official website.