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

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

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

助言がありますか?ありがとう!

3

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
追加された

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

$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
    $("#nav").addClass("scrolling");
  }
});
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript