0

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

至今：

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

查询：

$(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/

4

2 回答 2

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/

于 2012-10-05T14:08:45.573 回答
0

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

于 2012-10-05T08:18:54.467 回答