jquery - 跟踪固定 div 相对于窗口顶部的滚动偏移量

Question

所以我有一个带有固定导航栏的长滚动单页网站。

通过这个导航栏，我想跟踪它的.offset().top，这样我就可以根据距窗口顶部的偏移量添加或删除类。

Live code link

示例(这是我的逻辑，但我无法使 jQuery 警报正常工作。

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

Answer 1

尝试jQuery Waypoints 。您无需指定偏移量，而是使用页面上的元素在进入 View 时触发回调:

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

编辑:

但是为了正确回答您的问题，您的导航将始终处于相同的位置，因为 position:fixed 相对于视口(viewport)而不是页面定位您的元素。如果您想在没有 Waypoints 的情况下执行此操作，只需检查 body 标记的 scrollTop:

$(function () {
  $(window).scroll(function () {
    var offset = $("body").scrollTop();
    if (offset > 400)
      alert("Scrolled to 400");
  });
});