CODEWITHSUNDEEP
jqueryhtmlnavigationscrollnav
Bertel
Bertel

Reputation: 47

Hide navigation on scroll down

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/

Upvotes: 0

Views: 6473

Answers (2)

MassivePenguin
MassivePenguin

Reputation: 3511

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/

Upvotes: 2

dan_fides
dan_fides

Reputation: 324

Hm, your example works. I've changed Library (left bar) to jQuery and that's all. Also, add overflow:hidden; to your #header_nav. This will hide text that doesn't fit small height

Upvotes: 0

Related Questions