javascript - 修复了标题导航和scrollTo()下一个/上一个元素

Question

首先，我使用此代码使导航栏始终保持固定；

添加 CSS 绝对位置后:

var yOffset = $("#header").offset().top;
$(window).scroll(function() {
    if ($(window).scrollTop() > yOffset) {
        $("#header").css({
            'top': 0,
            'position': 'fixed'
        });
    } else {
        $("#header").css({
            'top': yOffset + 'px',
            'position': 'absolute'
        });
    }
});

但是现在我用于滚动到下一个元素的下一个/上一个关键事件没有捕获正确的元素位置。

这是我用于浏览下一个/上一个元素的代码。

// scroll to next post
function scrollToNew () {
  scrollTop = $(window).scrollTop();
  $('.post').each(function(i, h1){
    h1top = $(h1).offset().top;
    if (scrollTop < h1top) {
      $.scrollTo(h1);
      return false;
    }
  });
}

// scroll to previous post
function scrollToLast () {
  scrollTop = $(window).scrollTop();
  var scrollToThis = null;
  $('.post').each(function(i, h1) {
    h1top = $(h1).offset().top;
    if (scrollTop > h1top) {
      scrollToThis = h1;
    } else {
      return false;
    }
  });
  if(scrollToThis != null) {
    $.scrollTo(scrollToThis);
  }
}

我只是在按下按键时触发scrollToNew，它一直在工作，直到我进行了固定导航(#header)，因为它始终保持在顶部，因此用户滚动到的帖子标题变得不可见。我不知道如何解决这个问题。

任何建议都非常有帮助。

Answer 1

这是修复方法。

我将导航标题的高度添加到偏移量中。确切地说是 61 像素。问题已解决。

// scroll to next post
function scrollToNew () {
  scrollTop = $(window).scrollTop();
  $('.post').each(function(i, h1){
    h1top = $(h1).offset().top;
    if (scrollTop < h1top - 61) {
      $.scrollTo(h1, {offset: {left: 0, top: -61}});
      return false;
    }
  });
}

// scroll to previous post
function scrollToLast () {
  scrollTop = $(window).scrollTop();
  var scrollToThis = null;
  $('.post').each(function(i, h1) {
    h1top = $(h1).offset().top;
    if (scrollTop > h1top - 61) {
      scrollToThis = h1;
    } else {
      return false;
    }
  });
  if(scrollToThis != null) {
    $.scrollTo(scrollToThis, {offset: {left: 0, top: -61}});
  }
}