Fixed header navigation and scrollTo() next/previous elements
<p>First off I use this code to make the navigation bar always stay fixed;</p>

<p>After adding CSS position absolute:</p>

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

<p>But now my next/previous key events which used to scroll to next element is not catching the right element position.</p>

<p>here is my code for browsing next/prev element.</p>

<pre><code>// scroll to next post
function scrollToNew () {
  scrollTop = $(window).scrollTop();
  $('.post').each(function(i, h1){
    h1top = $(h1).offset().top;
    if (scrollTop &lt; 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 &gt; h1top) {
      scrollToThis = h1;
    } else {
      return false;
    }
  });
  if(scrollToThis != null) {
    $.scrollTo(scrollToThis);
  }
}
</code></pre>

<p>I simply used to fire the scrollToNew when key pressed and it was working until I made the fixed navigation (#header) because it stays always on top so the heading of post which user scrolls to, becomes invisible. I do not know how to get around this issue.</p>

<p>Any suggestions are greatly helpful really.</p>
