修复了标题导航和滚动到(）下一个/上一个元素

Fixed header navigation and scrollTo() next/previous elements

本文关键字：下一个 元素 上一个 滚动 标题 导航      更新时间：2023-09-26

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

添加 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），因为它始终保持在顶部，因此用户滚动到的帖子标题变得不可见。我不知道如何解决这个问题。

任何建议都非常有帮助。

这是修复程序。

我将导航标题的高度添加到偏移量中。这是精确的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}});
  }
}
相关文章：