title: Div Scroll With Page Using Jquery
body: <p>I'm trying to make my menu scroll with the user.</p>
  
  <p>This is relativly simply using:</p>
  
  <pre><code>#main-header-wrapper {
      width: 100vw;
      height: 75px;
      position: absolute;
      top: 0;
      left: 0;
  }
  </code></pre>
  
  <p>What I wanted was an animated type of scroll though, which was achievable using JQuery:</p>
  
  <pre><code>$(window).scroll(function(){
    $("#main-header-wrapper").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
  });
  </code></pre>
  
  <p>With this Jquery solution the menu bar slides down from the top after the user stops scrolling.</p>
  
  <p>But when the user scrolls up the bar appears to "stick" to the page before scrolling back up.</p>
  
  <p>What I'd like to achieve is the down scroll animation still working as is, but if the user scrolls up then there is no animation at all. The bar is simply at the top of the page during the entire scroll.</p>
  
  <p>Codepen: <a href="http://codepen.io/think123/pen/mAxlb" rel="nofollow noreferrer">http://codepen.io/think123/pen/mAxlb</a></p>
  
  <p>The Jquery was taken from: <a href="https://stackoverflow.com/questions/1638895/how-do-i-make-a-div-move-up-and-down-when-im-scrolling-the-page">How do I make a &lt;div&gt; move up and down when I&#39;m scrolling the page?</a></p>
  
  <p>I did come up with a solution by using the accepted answer from here: <a href="https://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event">How can I determine the direction of a jQuery scroll event?</a></p>
  
  <p>But this method just seems crude, but it achieves the desired effect.</p>
  
  <p>Is there a better way to achieve this?</p>
  
  <p>My solution:</p>
  
  <pre><code>var lastScrollTop = 0;
  $(window).scroll(function(event){
     var st = $(this).scrollTop();
     if (st &gt; lastScrollTop){
          $("#div").stop().animate({"marginTop":  ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
     } else {
        $("#div").css({"margin-top": ($(window).scrollTop()) + "px", "margin-left":($(window).scrollLeft()) + "px"});
     }
     lastScrollTop = st;
  });
  </code></pre>
  
  <p>I put a CodePen together so you may view the desired effect using my solution: <a href="http://codepen.io/anon/pen/XjXpZv" rel="nofollow noreferrer">http://codepen.io/anon/pen/XjXpZv</a></p>