jQuery Script Blog

10 Best Sticky Header Navigation Systems In JavaScript

by jQueryScript,

What Is Sticky Navigation

Sticky navigation (navbar, header navigation) is a modern site navigation design concept to improve the navigation experience on your long web page.

A sticky header navigation system will be always be fixed on then top no matter how your visitors scroll down or up the web page.

Sticky Navigation In Pure CSS

The simplest way to implement a sticky navigation on your webpage is to using the CSS position: sticky propery, which can be used to position the navigation based on the user's scroll position.

.navbar {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

However, if you'd like apply more features (e.g. shrink effects, responsiveness, dropdown sub-menus, etc) to the sticky navigation, you might need a jQuery or JavaScript plugin as shown below:

The Best Sticky Navigation Plugin

In this list, you'll find the 10 best and top downloaded jQuery and/or Vanilla JavaScript plugins to create advanced sticky header navigation for your websites. Enjoy.

Table of contents:

jQuery Sticky Navigation Plugins:

Animated Sticky Header On Scroll with CSS3 and Javascript

In this tutorial we're going to create a position fixed header that will changes its size on scroll. The idea is to decrease header's size and the inner elements will adjust their font-size/line height while a certain amount of the page gets

Animated Sticky Header On Scroll with CSS3 and Javascript

[Demo] [Download]

Sticky Navigation Bar with jQuery and Bootstrap

With a little CSS and jQuery magic, we can make a native Bootstrap navbar sticky at the top of the document as you scroll down the page.

Sticky Navigation Bar with jQuery and Bootstrap

[Demo] [Download]

Fixed Position Top Menu Bar with jQuery and CSS3 - nagging-menu

nagging-menu is a jQuery plugin that allows you to create a floating and fixed position top menu bar on your webpage.

Fixed Position Top Menu Bar with jQuery and CSS3 - nagging-menu

[Demo] [Download]

jQuery Plugin To Hide Sticky Navbar When Scrolling Down - Scroll Up Menu

Scroll Up Menu is a mobile-first jQuery plugin that auto hide the sticky top navigation menu when scrolling down the page, and show when scrolling up. This is really useful for mobile browsers with little space for annoying fixed headers.

jQuery Plugin To Hide Sticky Navbar When Scrolling Down - Scroll Up Menu

[Demo] [Download]

jQuery Plugin For Fixed Bootstrap 4 Nav With Smooth Scroll - navbar-fixed.js

navbar-fixed.js is a very small jQuery plugin used to extend the default fixed Bootstrap navbar component with scrollspy and smooth scroll support.

jQuery Plugin For Fixed Bootstrap 4 Nav With Smooth Scroll - navbar-fixed.js

[Demo] [Download]

Vanilla JavaScript Sticky Navigation Plugins:

Pure JavaScript Sticky Header On Scroll – header-on-scroll.js

header-on-scroll.js is a native JavaScript library used to create a responsive sticky header navigation which reveals on scroll down and hides on scroll up.

Pure JavaScript Sticky Header On Scroll – header-on-scroll.js

[Demo] [Download]

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.

Smart Sticky Header Navigation with Vanilla JavaScript – Shrinking Header

[Demo] [Download]

Smart Fixed Top Navigation In Pure JavaScript

Just another JavaScript solution to create a smart site navigation that auto hides on scroll down and reveals itself again on scroll up.

Smart Fixed Top Navigation In Pure JavaScript

[Demo] [Download]

Auto-Reveal Sticky Header Navigation with Pure JavaScript and CSS

A sticky header navigation that automatically hides or reveals based on the scroll behavior.

Auto-Reveal Sticky Header Navigation with Pure JavaScript and CSS

[Demo] [Download]

Stacked Sticky Elements In Pure JavaScript – stickystack

stickystack is a pure JavaScript library that makes multiple elements stacked and fixed on the top of the webpage when scrolling down.

Stacked Sticky Elements In Pure JavaScript – stickystack

[Demo] [Download]

Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Sticky Header Navigation on the web & mobile? Check out the jQuery Sticky Navigation and JavaScript Sticky Navigation sections.

See also: