2

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

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

实时代码链接

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

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

2 回答 2

3

试试jQuery 航点。您无需指定偏移量，而是使用页面上的元素在它们出现时触发回调：

$(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 + " ) ");

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

请参阅此工作小提琴示例！

// 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 回答