向下滚动时隐藏导航答案

【问题标题】：Hide navigation on scroll down向下滚动时隐藏导航
【发布时间】：2012-10-04 10:53:02
【问题描述】：

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

到目前为止：

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/

【问题讨论】：

当您说“我似乎无法正常工作”时，您是什么意思？目前的症状是什么？你被困在哪里了？
当我滚动时什么都没有发生，我的导航一直保持不变...我希望它在我向下滚动和暂停时隐藏，但是一旦我开始向上滚动我希望它消失在。
没有人知道如何帮助我解决这个问题？或者它是不可能的？
你的 JSFiddle 错了；您使用的是 MooTools 而不是 jQuery。（更新 JSFiddle：jsfiddle.net/GGRUL/13）
好吧，当我滚动时，我的屏幕上什么也没有发生 - 它在您的屏幕上工作吗？

标签： jquery html navigation scroll nav

【解决方案1】：

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

Example

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

编辑：

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

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

【讨论】：

是的，但是我需要一直滚动到顶部才能再次显示 - 我需要它在我开始滚动时立即显示...知道如何解决这个问题吗？这是最新的：jsfiddle.net/iBertel/4uqNL
使用新代码更新答案，基于此：stackoverflow.com/questions/4326845/…
很抱歉，我没有正确表述。一旦我向下滚动，我需要隐藏我的菜单 - 当我向上滚动时，它应该再次可见 - 它不仅应该在我一直滚动到顶部时可见，而且一旦我开始向上滚动..你认为你能解决这个问题吗？
哇 - 你我的英雄 - 非常感谢！最后一件事 - 如果窗口也停止，是否可以隐藏它，除非在顶部？就像当你向下滚动时它隐藏然后可能向上滚动一点然后它可见，然后如果我没有一直滚动到顶部，我需要再次隐藏......
是的。将window.scroll事件中的函数抽象出来，使用setTimeout和clearTimeout：jsfiddle.net/37srY

【解决方案2】：

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

【讨论】：