How to appear-disappear navigation bar on a webpage?

Question

I am working on appear-disappear of a navigation bar,which comes on header of webpage.The requirement was when a user scroll down it should disappear. So it was implemented and working fine using following javascript.

 // Header scroll to 200 $(function () { $('#header').removeClass('header-small'); $(document).on('scroll', $(window), function () { var scroll = $(window).scrollTop(); $(window).s /* With offer slider 65 and with out offer slider */ var scrollToHeight = 35; var sectionHeight = "135px"; if (scroll >= scrollToHeight) { $('.navigation-all').slideUp(100); $('.section').css('margin-top', sectionHeight); $('#header').addClass('header-small'); $('.logo-text').slideUp(100); $('.floating-cart').removeClass('myCartPopUpShow'); } else { $('#header').removeClass('header-small'); $('.section').css('margin-top', '100'); $('.navigation-all').slideDown(300); $('.logo-text').slideDown(300); $('.floating-cart').addClass('myCartPopUpShow'); } }); }); 

It disappears on scroll down of 35px. and appears again when user scrolls up to top. Now I want to make it visible as user scroll it up even slightly.

Please advice what change I can make in existing script. Thanks in advance.

Answer 1

You Can fixed the header to not scroll with css:

.top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 60px;
}

For more example:

https://css-tricks.com/scroll-fix-content/

Thanks

Answer 2

UPDATED! Here is the simplest way to get this effect,

DEMO : http://jsfiddle.net/yeyene/fnyxpw94/1/

JQUERY

var lastScrollTop = 0;
$(document).on('scroll', function () {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
        $('#showHide_hd').slideUp(500);
    } else {
        $('#showHide_hd').slideDown(500);
    }
    lastScrollTop = st;
});

CSS

#fixed_hd {
    position:fixed;
    top:0;
    left:0;
    width:98%;
    height:20px;
    background:#dfdfdf;
    padding:20px 1%;
}
#showHide_hd {
    position:fixed;
    top:60px;
    left:0;
    width:100%;
    background:green;
    padding:10px 0;
}
#content{
    float:left;
    margin:110px 0 0 0;
}

HTML

<div id="fixed_hd">Fixed Header</div>
<div id="showHide_hd">Show/Hide OnScroll Header</div>
<div id="content">
    bla bla bla..
</div>