0

ページスクロールの特定のポイントでナビゲーションを非表示および表示するjqueryがいくつかあります。唯一の問題は、ナビゲーションの位置が相対から固定に変更されると、ページ上のすべてのコンテンツが上にシフトして、ナビゲーションがあったスペースを埋めることです。うまくいく解決策が見つからないようです。スクリプトは次のとおりです。

if ($(this).scrollTop() > 800) {
    $('nav a').css({
        "color": "#555"
    });
    $('header').css({
        "position": "fixed",
        "top": "0px",
        "background": "white"
    });
} else {
    if ($(this).scrollTop() <= 800) {
        $('nav a').css({
            "color": "white"
        });
        $('header').css({
            "position": "relative",
            "top": "0px",
            "background": "none"
        });
    }
}
4

3 に答える 3

0

これを行うときは、一定量スクロールした後position: absolute;になる前に、常にナビゲーションのスタイルを設定する必要があります。fixedナビゲーションセクション用のスペースを確保するために、コンテンツの残りの部分をスタイル設定する必要があります（したがって、固定の高さを維持する必要があります）が、「ジャンプ」効果はありません。

于 2013-01-25T11:38:49.257 に答える
0

セットする：

position: absolute;
top:0; left:0;

絶対位置はすべての要素の上にそれを作ります、そしてそれから上と左はページ上の他のものを邪魔することなくその位置をマージンすることができます...

于 2013-01-25T11:40:41.717 に答える
0

これは単なるアイデアです：

visibilitytoを指定してhidden、ヘッダーのクローンを作成してみてください。

if ($(this).scrollTop() > 800) {
$('nav a').css({
    "color": "#555"
});
var $clone = $('header').clone();
$clone.css({
    "position": "fixed",
    "top": "0px",
    "background": "white"
 });
 $('header').css({"visibility": "hidden"});

} else {
 if ($(this).scrollTop() <= 800) {
    $('nav a').css({
        "color": "white"
    });
    $clone.hide();
    $('header').css({
        "position": "relative",
        "top": "0px",
        "background": "none",
        "visibility": "visible"
    });
 }
}
于 2013-01-25T11:47:36.497 に答える