Question

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

使用此导航栏我想跟踪其.offset().top，因此我可以根据窗口顶部的偏移量添加或删除类。

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

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

Answer 1

试试jQuery Waypoints。您可以使用页面上的元素在进入视图时触发回调，而不是指定偏移量：

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

修改

但要正确回答您的问题，您的导航将始终处于相同的位置，因为position: fixed会将您的元素相对于视口而不是页面定位。如果您想在没有Waypoint的情况下执行此操作，只需查看body代码的scrollTop：

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

Answer 2

您的代码存在的问题是您使用的是offset.top，但您没有声明offset变量，这意味着.top没有返回任何内容。

您似乎已查看了offset()的jQuery文档，但未正确理解/阅读该示例。

在文档中，他们正在初始化变量：

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

然后提取.top和.left值：

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

从您的链接查看网页，您不需要非常广泛的脚本来检查用户滚动了多少。这个小功能为您提供所需：

请参阅此working Fiddle示例！

// 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)
}

有关此内容的更多信息，请参阅this stackoverflow answer。

从窗口顶部跟踪固定div的滚动偏移量

2 个答案: