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'
        });
    }
});

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

这是我浏览next / prev元素的代码。

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

修复了标题导航和scrollTo（）下一个/前一个元素

1 个答案: