title: Javascript: Nav bar disappears when scrolling up and reaches the top
body: <p>I have created a navigation bar on my website (still in development). This navigation bar appears when a visitor is scrolling up. However, the nav bar remains all the way to the top. At the top I have the original menu, so need to have the nav bar as well. </p>
  
  <p>What I would like to achieve is that the menu bar disappears as soon as the visitor hits a certain point, like hitting a div and it disappears. So far no luck with it. I use -70px (position:fixed) to place the nav bar outside the viewport and make it via Javascript appear when a visitor is scrolling up.</p>
  
  <p>This is the Javascript for the nav bar:</p>
  
  <pre><code>var lastScrollTop = pageYOffset || document.documentElement.scrollTop;
  
  window.addEventListener("scroll", function() {
     var st = window.pageYOffset || document.documentElement.scrollTop;
     if (st &gt; lastScrollTop) {
  // Scroll Down
  
  $('.navbar').css({
     "transform": "translate3d(0,-70px,0)"
  });
  
  } else {
   // Scroll Up
  
  $('.navbar').css({
     "transform": "translate3d(0,70px,0)"
  });
  }
     lastScrollTop = st;
  }, false);
  </code></pre>
  
  <p>Any help to make the nav bar disappear when hitting a certain div scrolling up will be much appreciated. Thanks in advance!</p>
  
  <p>This is the closest I got, see below. Basically it does what I need (disable the nav bar in a certain area, in this case 350px from the bottom). I just need it to be the top, not the bottom.</p>
  
  <pre><code>$(window).scroll(function() {
  var pxFromBottom = 350;
  if ($(window).scrollTop() + $(window).height() &gt; $(document).height() - pxFromBottom) {
  $('.navbar').css({
    "transform": "translate3d(0,-70px,0)"
  });
  } 
  });
  </code></pre>