Hide On Scroll Fixed Top Navigation In Pure JavaScript (no jQuery)

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">
    <a class="link" href="#" title="Home">Home</a>
    <a class="link" href="#" title="About">About</a>
    <a class="link" href="#" title="Contact">Contact</a>

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');
  // Scrolling up
  } else if (new_scroll_position > last_scroll_position) {
    // header.removeClass('slideUp').addClass('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.

Related Posts


jQuery Pugin to Make HTML Tables Searchable and Sortable with Pagination

jQuery fancy table is a jQuery plugin to make HTML tables searchable and sort using pagination. The fancyTable the plugin adds very fast jQuery, client-side sorting, page…


A Simple Month Picker Plugin in Vanilla JavaScript

Month Picker is a simple plugin implemented in vanilla JavaScript. Inspired by jQuery UI Month Picker by KidSysco, without any 3rd party dependencies. Must Read: Date Range…


A Small jQuery Plugin For Displaying Muslim Prayer Times

Prayer Times is a small jQuery plugin that gets accurate prayer times from api.aladhan.com and shows them to users based on their location. Features: English / Arabic…


Simple and Flexible, Content Placeholder Loading Animation

Placeholder loading is simple and flexible, CSS only, with animation for downloading OR loading content. This is a pure CSS solution to create an animated and customizable…


Simple and Lightweight LazyLoad Embed Vimeo Player Plugin in Pure JavaScript

LazyLoad Embed Vimeo Player – Simple and Lightweight Plugin – Pure JavaScript. Vimeo LazyLoad is the sister project of Youtube LazyLoad that loads an on-demand Vimeo video…


Implement Drag, Drop, and Sortable Behaviors jQuery UI | agnostic-draggable

agnostic-draggable is an undefined set of libraries that implement drag, drop, and sort behaviors inspired by jQuery UI. To enable the drag function on any DOM. Move…