jqueryはスクロール後のページのトップの座標を検出する

Question

jqueryはスクロール後のページのトップの座標を検出する

私はあなたが特定のポイントを過ぎてスクロールするまでヘッダーに固執したいと思う「戻るボタン」を持っています（ヘッダーをスクロールすると、それは絶対的に配置されていますが、

Kinda like the 'GAMEHQ' section does here: http://scores.espn.go.com/mlb/preview?gameId=311027124

助言がありますか？ありがとう！

3

追加された 27 10月 2011 〜で 10:02 著者 stewart715

ビュー: 10

源

2 答え

ページ内の現在地に関する情報を提供する関数は、 scrollTop（）です。特定のポイントを過ぎているかどうかを検出して、項目のCSSを修正して position：fixed にするなどの方法があります。

ここに例があります：

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() >= 120) {
            $('#topThing').css('position', 'fixed');
        } else {
            $('#topThing').css('position', 'relative');
        }
    });
});

JSFiddleの使い方を教えてください。

9

追加された 27 10月 2011 〜で 10:06 著者 Gavin Anderegg

源

著者 nheinrich · Answer 1 · 2011-10-27T10:10Z

この例ではjQueryを使用していますが、かなり簡単に変更できます。この関数は、あなたが望むものに近いはずです。 100 は、#navのクラスを変更したいページの下のピクセル数です。あなたのCSSでは＃nav.scrolling 宣言が position：fixed への変更を処理していることを確認したいと考えています。

$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
    $("#nav").addClass("scrolling");
  }
});