向下滚动时隐藏导航

Question

我需要的是一个导航菜单，当用户向下滚动或停止时隐藏（除了在顶部，那么它应该是可见的），一旦用户开始向上滚动，菜单应该重新出现。

迄今：

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);
        }  
    }
});

当我滚动时没有任何反应，我的导航始终保持不变。我希望它在我向下滚动和暂停时隐藏，但是一旦我开始向上滚动，我希望它淡入。但我似乎无法让它工作，你们能告诉我我做错了什么吗？

还在这里做了一个小提琴：http://jsfiddle.net/iBertel/GGRUL/

Answer 1

将 $（'body'）.scrollTop 更改为 $（window）.scrollTop 似乎可以正常工作：

例

在Chrome，Firefox，IE9，Windows上的Opera（所有最新版本AFAIK）中进行测试。

编辑：

以下代码将在您开始向上滚动后立即触发调整大小机制：

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

Answer 2

嗯，你的例子有效。我已经将库（左栏）更改为jQuery，仅此而已。另外，将overflow:hidden;添加到您的#header_nav中。这将隐藏不适合小高度的文本