Sticky Menu Show when scrolling up

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">
        <h1>Title</h1>
    </div>
    <div class="navigation">
        <nav class="nav-collapse">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
</div>

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) {
				$(".header_area").addClass('sticky');
			} else {
				$(".header_area").removeClass('sticky');
			}
			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
        $(".header_area").addClass("sticky_top");
      } else {
        //Remove Class when header stay at top
        $(".header_area").removeClass("sticky");
        $(".header_area").removeClass("sticky_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

.header_area.sticky_top {
  position: fixed;
  width: 100%;
  top: 0;
  background: #000;
  color: #fff;
  z-index: 99;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
}

.header_area.sticky_top.sticky{
    opacity: 1;
    visibility: visible;
}

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