2

だから私は固定ナビゲーションバーを備えた長いスクロールの1ページのウェブサイトを持っています。

このナビゲーションバーを使用して追跡したい.offset().topので、ウィンドウの上部からのオフセットに基づいてクラスを追加または削除できます。

ライブコードリンク

例（これは私のロジックですが、jQueryアラートを機能させることさえできません。

$(window).scroll(function () {
  var elem = $('.navigation');
  var topValue = offset.top;
  if (topValue > 400) {
    alert(topValue);
  }
});
4

2 に答える 2

3

jQueryWaypointsを試してください。オフセットを指定する代わりに、ページ上の要素を使用して、要素が表示されるたびにコールバックをトリガーします。

$(function () {
  $("#map").waypoint(function () {
    alert("Scrolled to #map");
  });
});

編集：

ただし、質問に正しく答えるためにposition: fixed、要素はページではなくビューポートを基準にして配置されるため、ナビゲーションは常に同じ位置になります。ウェイポイントなしでこれを実行したい場合は、bodyタグのscrollTop：を確認してください。

$(function () {
  $(window).scroll(function () {
    var offset = $("body").scrollTop();
    if (offset > 400)
      alert("Scrolled to 400");
  });
});
于 2012-06-14T23:29:35.557 に答える
0

コードの問題は、を使用してoffset.topいるが、offset変数が宣言されていないことです。つまり、.topは何も返しません。

offset（）のjQueryドキュメントを見たようですが、例を正しく理解/読んでいません。

ドキュメントでは、変数を初期化しています。

var offset = $(this).offset();

そして、.topとの.left値を抽出します。

alert(" coordinates: ( " + offset.left + ", " + offset.top + " ) ");

リンクからWebページを見ると、ユーザーがどれだけスクロールしたかを確認するための非常に大規模なスクリプトは必要ありません。この小さな関数は、必要なものを提供します。

この実用的なフィドルの例を参照してください！

// getPageScroll() by quirksmode.com
function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
      yScroll = self.pageYOffset;
      xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
      yScroll = document.documentElement.scrollTop;
      xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
      yScroll = document.body.scrollTop;
      xScroll = document.body.scrollLeft;
    }
    return new Array(xScroll,yScroll)
}

これについての詳細は、このstackoverflowの回答で見つけることができます。

于 2012-06-15T00:30:00.467 に答える