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似乎让它工作：

Example

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

编辑：

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

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

Answer 2

嗯，你的例子有效。我已将Library（左栏）更改为jQuery，这就是全部。另外，将overflow:hidden;添加到您的#header_nav。这将隐藏不适合小高度的文本

向下滚动隐藏导航

2 个答案: