Hide navigation on scroll down

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/

When you say "i cant seem to get it working" what do you mean? Whats the current symptom? Where are you stuck? — HaemEternal, Oct 04 '12 at 11:47
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. — Bertel, Oct 04 '12 at 12:04
Nobody have an idea on how to help me solve this? or maybe its is not possible? — Bertel, Oct 05 '12 at 07:03
Your JSFiddle is wrong; you're using MooTools instead of jQuery. (Updated JSFiddle: http://jsfiddle.net/GGRUL/13/) — MassivePenguin, Oct 05 '12 at 08:15
Well still, nothing happens on my screen when i scroll - does it work on your screen? — Bertel, Oct 05 '12 at 10:36

MassivePenguin · Accepted Answer · 2012-10-11T09:09:19.707

2

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/

edited Oct 11 '12 at 09:09

answered Oct 05 '12 at 14:08

MassivePenguin

3,701
4
24
46

Yes but i need to scroll all the way to top before it shows again - i need it to show as soon as i start to sroll up... Got any idea on how to fix this? This is the latest: http://jsfiddle.net/iBertel/4uqNL/ – Bertel Oct 11 '12 at 08:58
Updated answer with new code, based on this: http://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event – MassivePenguin Oct 11 '12 at 09:09
Im so sorry, i didnt formulate it right. I need my menu to hide once i scroll down - and when i scroll up it should become visible again - it should NOT only be visible when i scroll all the way to the top but as soon as i start to scroll up.. You think you can fix this? – Bertel Oct 11 '12 at 10:47
wow - your my hero - thank you very much! One last thing - is it possible to hide it if the window stops aswell unless at top? Like when you scroll down it hides then maybe scroll a bit up and then its visible, then i need to hide again if im not scrolling all the way to top... – Bertel Oct 11 '12 at 11:46
Yep. Abstract the functions out of the window.scroll event, and use setTimeout and clearTimeout: http://jsfiddle.net/37srY/ – MassivePenguin Oct 11 '12 at 11:57
Argh - as you test you discover!! One last thing - promise... I need it stay on mouse hover. Like if you scroll up and menu appears, then u take up the mouse and it should not fade away unless you remove the mouse again or scroll down... Is this possible aswell?? – Bertel Oct 11 '12 at 12:50

score 0 · Answer 2 · answered Oct 05 '12 at 08:18

0

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

answered Oct 05 '12 at 08:18

dan_fides

324
1
10

Hide navigation on scroll down

2 Answers2