Sticky Menu Show When Scrolling Up | Code For Developers

Sticky Menu Show when scrolling up

Header bar only show when scrolling up with simple jQuery and CSS trick.

With this simple jQuery will add a class on the header to show. We will need some CSS and jquery to make it happens.

HTML markup will be something like that..

<div class="header_area">
    <div class="logo_wrapper">
    <div class="navigation">
        <nav class="nav-collapse">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>

Here on HTML we have header_area Class. We will add a new Class when the user scrolls up. The class will only add when user trying to go up after scroll down to the page

var prevScrollpos = window.pageYOffset;
		window.onscroll = function () {
			var currentScrollPos = window.pageYOffset;
			if (prevScrollpos > currentScrollPos) {
			} else {
			prevScrollpos = currentScrollPos;

Now we have a sticky class with our header_area. But we need to hide Header when scrolling down. To do that we need to add one more class to we can hide when scroll down.

$(window).scroll(function() {
      if ($(this).scrollTop()) {
        // add class when scroll down
      } else {
        //Remove Class when header stay at top

We just added sticky_top calls with our header when it go scroll down. And remove all two classes that we added last time for scroll down to scroll up.

We are done now just use your own css show it like as you want. I will give you some as example

CSS for hide header when scrolling down
.header_area.sticky_top {
  position: fixed;
  width: 100%;
  top: 0;
  background: #000;
  color: #fff;
  z-index: 99;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
After go down and scrolling up
    opacity: 1;
    visibility: visible;

That’s the all. Hope it helps. Comment below if you have any issue with this code.

Previous Code

JQuery Auto Hight

jQuery height change after a specific time interva ...

Next Code

Enable Leverage browser caching & Compression

To speed up your website and get good score, Enabl ...

Leave a Reply

Your email address will not be published. Required fields are marked *

If you find it useful

Buy me a coffee









WP Plugin Development

Simple jQuery Accordion Collapse

Custom coded Simple jQuery Accordion with toggle a ...

Add Classe when the item visible

Add class on scroll to viewport jquery code ...

Jquery Replace specific text in all element


Sequential Fading jQuery Text Animation

This code animates text using jQuery, creating a s ...

Animated jQuery Counter Up with the Intersection Observer API

Learn how to create a simple counter animation usi ...