title: Add class to element when user scrolls up to certain point
body: <p>So I have created a sticky header using jQuery, which adds a class to the header when the user scrolls past it. However, I want to know how I can add another class to the header when the user is scrolling back up and reaches 50px before the top of the page? However, I only want this class to add to the header when the user is scrolling back UP, not down, and I want it to remove when the user reaches the top of the page.</p>
  
  <p>This is my code:</p>
  
  <pre><code>$(window).scroll(function () {
      if( $(window).scrollTop() &gt; $('#header').offset().top &amp;&amp; !($('#header').hasClass('sticky-header'))){
              $('#header').addClass('sticky-header');
          } else if ($(window).scrollTop() == 0){
              $('#header').removeClass('sticky-header');
              }
      });
  </code></pre>