title: jQuery "unstick" box when scrolling before a certain threshold
body: <p>I have a box that needs to stick, and I am using <code>position: fixed</code> CSS for that when it reaches the bottom of the page while scrolling, and then unstick while scrolling back up past that threshold. Below is my jQuery code:</p>
  <pre><code>$(window).scroll(function() {
    var wHeight = $(window).height();
    var stickyTop = $('.threshold').offset().top;
    var xxx = stickyTop - wHeight;
    var windowTop = $(window).scrollTop();
  
    if ( windowTop &gt; xxx ) {
      console.log(windowTop)
      $('.box').addClass(&quot;sticky&quot;)
    } else {
      $('.box').removeClass(&quot;sticky&quot;)
    }
  });
  </code></pre>
  <p>I don't understand why my <code>else</code> state doesn't work. And it's weird that the <code>console.log</code> kicks in late.</p>
  <p>Here's a complete pen: <a href="https://codepen.io/frontend2020/pen/vYjJBma?editors=1010" rel="nofollow noreferrer">https://codepen.io/frontend2020/pen/vYjJBma?editors=1010</a></p>
  <p>Thanks for helping!</p>