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

Leave a Reply

Your email address will not be published.

five × one =

    skype

    Need Coding Help?

    Connect Skype

    ACF

    JavaScript

    jQuery

    Others

    PHP

    WooCommerce

    WordPress

    Add Classe when the item visible

    Add class on scroll to viewport jquery code ...

    Counter up with a simple jQuery

    count down numbers with jquery ...

    Jquery Custom Tab

    ...

    Jquery Replace specific text in all element

    ...

    Simple jQuery Accordion Collapse

    Custom coded Simple jQuery Accordion with toggle a ...

    top