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..

Index.html
<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

Custom.js
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.

Custom.js
$(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

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
.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.

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 ...

0 Comment

Leave a Reply

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

12 + fifteen =

Cookie Popup with jQuery

Browser cookies popup accept, store cookies in bro ...

JQuery Auto Hight

jQuery height change after a specific time interva ...

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 ...

Custom tab

...

ACF

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

skype

Need Coding Help?

Connect Skype
top