0

まず、このコードを使用して、ナビゲーションバーを常に固定したままにします。

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）を作成するまでは機能していました。これは、scrollToNewが常に一番上にあるため、ユーザーがスクロールする投稿の見出しが表示されなくなるためです。この問題を回避する方法がわかりません。

どんな提案も本当に役に立ちます。

4

1 に答える 1

2

これが修正です。

ナビゲーションヘッダーの高さをオフセットに追加しました。これは正確に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}});
  }
}
于 2012-06-12T11:28:12.787 に答える