スティッキーヘッダーを切り替えるには？

以下のコードは、100pxをスクロールした後に表示される固定ヘッダーを作成します。ページの下部に移動したら、固定ヘッダーをオフにするにはどうすればよいですか？ 800pxと言うことができますか？スティッキーヘッダーを切り替えるには？

ありがとうございます！

$(window).scroll(function() { 
if ($(this).scrollTop() > 100){ 
    $('header').addClass("sticky"); 
    } 

    else{ 
    $('header').removeClass("sticky"); 
    } 
})

出典

2016-04-25 AndrewLeonardi

このような意味ですか？

$(window).scroll(function() { 
    if ($(this).scrollTop() > 100 && $(this).scrollTop() < 800) { 
     $('header').addClass("sticky"); 
    } else{ 
     $('header').removeClass("sticky"); 
    } 
})

出典

2016-04-25 23:27:18 Gerfried

私は '$（this）.scrollTop（）'を使いやすいように変数にキャッシュします。 –

これは完璧です！ありがとうございました！ – AndrewLeonardi

あなたはそれがページを取得するときのために、他の条件に800ピクセル追加することができます。私の例では

$(window).scroll(function() { 
    if (($(this).scrollTop() > 100) && ($(this).scrollTop() < 800)){ 
     $('header').addClass("sticky"); 
    } 
    else{ 
     $('header').removeClass("sticky"); 
    } 
});

：

$(this).scrollTop()は、ビューの最上部を表す変数である
if statementの最初の部分に100pxの追加条件が追加されます
if statementの2番目の部分は、800pxの除去の条件を追加します。

出典

2016-04-25 23:27:44

Gerfriedのものと重複しているので、私はこの回答をdownvotingしています。 –

@TiagoMarinhoこの回答には部品の説明が含まれており、ほぼ同じ時期に質問に回答しました。 –

私は同意しません。私が見たことから、あなたはまずGerfriedの答えにマッチするように編集しました（これは非効率なtbhでした）。とにかく、あなたの説明が追加される前にコメントが投稿されたので、私は自分のdownvoteを削除します。 –

私はCSSを使用することをお勧めします。ナビがスティッキーである場合、常にスティッキーにしておき、メインコンテンツ保持者にマージンを加えてナビのためのスペースを確保してください。例えば： NAVは、デスクトップ用途に108pxトールである場合：

.main-content-holder{ 
    position:relative; 
    display:block; 
    margin-top:108px 
}

、メディアクエリーと高さ及び/又は位置を調整します。

出典

2016-04-25 23:39:52

これは常にそうではないかもしれません.UIが100ピクセル下にスクロールするとUIが異なる可能性があるからです。私は、YouTubeのビデオマネージャーがこれまでのように動作していたと考えています。ユーザーがある時点を過ぎると、ツールバーはスティッキーになりました。 –

スティッキーヘッダーを切り替えるには？

答えて

関連する問題