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

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/

4

2 に答える 2

2

$（'body'）。scrollTopを$（window）.scrollTopに変更すると、機能するように見えます。

例

Chrome、Firefox、IE9、Windows上のOpera（すべての最新バージョンAFAIK）でテスト済み。

編集：

次のコードは、上にスクロールし始めるとすぐにサイズ変更メカニズムを起動します。

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

于 2012-10-05T14:08:45.573 に答える
0

うーん、あなたの例はうまくいきます。ライブラリ（左側のバー）をjQueryに変更しました。これですべてです。また、に追加overflow:hidden;します#header_nav。これにより、小さな高さに合わないテキストが非表示になります

于 2012-10-05T08:18:54.467 に答える