向下滚动“向上滑动”导航菜单，并在向上滚动时立即显示

Question

I want my nav menu to slide up to a certain level as soon as I scroll down, and reappear as soon as I scroll up. I want it to be exactly as the following menu: http://www.defringe.com/ If you notice, when we slide down, we can still notice a tip of the menu.

Now what I was able to find so far is a code that hides the menu completely. here is my code:

HTML:

<header id="header-wrap">
<nav id="topnav">
    <ul>
      <li>point1</li>
      <li>point2</li>
      <li>point3</li>
      <li>point4</li>
    </ul>
</nav>

CSS:

#topnav{
position:absolute;
margin:auto;
padding-top:20px;
height:60px;
width:576px;
bottom: 0;}

#header-wrap{
background:#f1f2f2;
height:60px;
position:fixed;
width:100%;}

jQuery:

 $(function(){
    $('header').data('size','big');
   var previousScroll = 0;
    headerOrgOffset = $('#topnav').height()

$('#header-wrap').height($('#topnav').height());
});

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header-wrap').slideUp("fast");
        } else {
            $('#header-wrap').slideDown("fast");
        }
    } 
    previousScroll = currentScroll;
});

Thanks!

Answer 1

In this case you do not want to you slideUp / slideDown but rather build your own function that slides the menu only a bit to -margin

Somnething like

$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
    if (currentScroll > previousScroll) {
        // Say the menu height is 100px
        $('#header-wrap').css("margin-top", "-90px");
    } else {
        $('#header-wrap').css("margin-top", "0");
    }
} 
previousScroll = currentScroll;
});

Obviously you need to format the menu properly, have it fixed etc, but this should do the trick. If you are not sure how to make it work, let me know and I can do it for you completely.