Question

What I need is a navigation menu that hides when user is scrolling down or stops (except in top, then it should be visible), once the user begins to scroll up, the menu should reappear.

So far:

HTML:

<div id="wrapper">

    <div id="header_nav">
        <ul>
            <li>Punkt1</li>
            <li>Punkt2</li>
            <li>Punkt3</li>
            <li>Punkt4</li>
        </ul>
    </div>

</div>

CSS:

* {
    padding:0px; 
    margin:0px;
}
#wrapper {
    height:1200px; 
    width:960px;
    background-color:#567; 
    margin:auto;
}
#header_nav {
    position:fixed; 
    width:960px;
    height:auto;
    background-color:#678;
}

JQUERY:

$(function(){
    $('#header_nav').data('size','big');
});

$(window).scroll(function(){
    if($('body').scrollTop() > 0)
    {
        if($('#header_nav').data('size') == 'big')
        {
            $('#header_nav').data('size','small');
            $('#header_nav').stop().animate({
                height:'40px'
            },600);
        }
    }
    else
    {
        if($('#header_nav').data('size') == 'small')
        {
            $('#header_nav').data('size','big');
            $('#header_nav').stop().animate({
                height:'100px'
            },600);
        }  
    }
});

When I scroll nothing happens, my nav just stays the same the entire time. I want it to hide when I scroll down and pause, but once I start to scroll up I want it to fade in.
But I cant seem to get it working, can you guys tell me what I’m doing wrong?

Also made a fiddle here: http://jsfiddle.net/iBertel/GGRUL/

Answer 1

Changing $(‘body’).scrollTop to $(window).scrollTop seems to get it working:

Example

Tested in Chrome, Firefox, IE9, Opera on Windows (all latest versions AFAIK).

EDIT:

The following code will fire the resizing mechanism as soon as you start scrolling up:

http://jsfiddle.net/GbXG4/4/