0

css を使用してページの同じ位置に留まりたいメニューがあります。

position:fixed;
top: 0;

しかし、ページがスクロールしたときにメニューが特定の領域の外に出ないようにしたい. この例を参照してください (結果ウィンドウをスクロールしてください)。

http://jsfiddle.net/Fg2MA/1/

これは CSS だけで行うことができますか、またはこれに対するエレガントな JS ソリューションを提案できますか?

どうもありがとう。

4

1 に答える 1

1

Javaスクリプト（または非常にトリッキーなcssトリック？）なしでは機能しないと思いますが、JQueryを使用するオプションがある場合、解決策は非常に簡単です。

$(document).on('scroll', function () {
    if ($(document).scrollTop() > ($("#container")[0].offsetTop + $("#container").height())) {
        $("#menu").css({
            display: "none",
        });
    }
    else {
       $("#menu").css({
            display: "block",
        }); 
    }
});

条件では、実際のスクロール位置がコンテナーの先頭の下にあるかどうかを確認します。はいの場合、css はそれ以外の場合に#menu変更されdisplay: none;ますdisplay: block;

フィドルを参照してください: http://jsfiddle.net/Fg2MA/3/

于 2013-06-11T15:48:27.970 に答える