Hide/Show Nav on Vertical Scroll
<p>I've implemented a scroll based state change on my nav bar, which fades in a fixed position nav at the screen top after the user scrolls down a lengthy page and then hides it and puts it back in it's relative position again as they scroll back up to see the top of the page. It works great 90% of the time.  Here's my code.. </p>

<pre><code>function scrollNavReveal() {
var nav = $('nav.nav-primary');
$(window).scroll(function(){
    var scrollpos = $(this).scrollTop();
    if ((scrollpos &gt; 200) &amp;&amp; (scrollpos &lt; 800)) {
      nav.fadeOut(500);
    }
    else if (scrollpos &gt; 800) {
          nav.css({"position": "fixed", "width": "100%"}).fadeIn(500);
    }
    else {
      nav.css({"position": "relative", "width": "100%", "display": "block"});
    }
});
</code></pre>

<p>}</p>

<p>The issue is that when I scroll to the page top very quickly with my mouse, sometimes the nav does not appear.  I have to make a small scroll on the mouse and then it pops back into place.  This also happens when I use my scroll to top function which is initiated when a user clicks the 'go to top' button in the footer.  </p>

<pre><code>function go_to_top() {
    $('a.naada-top').click(function() {
    $('html, body').animate({scrollTop:0}, 'slow');
})
</code></pre>

<p>}</p>

<p>In the go_to_top function I believe the <code>.animate({scrollTop:0}, 'slow');</code> does not take into account the height of the nav itself, which isn't currently in <code>position: relative;</code> (hence not in the normal DOM flow/scroll height).  </p>

<p>Both issues seem very similar, but slightly different and they can be seen and tested here <a href="http://naada.staging.wpengine.com" rel="nofollow">naada.staging.wpengine.com</a> </p>

<p>Thanks for your help!</p>