title: Do something 300px after leaves the bottom
body: <p>I have a code to display something when get 300px before the scroll reaches the bottom! When the bottom is reached, I want to get rid of this message when get 300px after leave the bottom!</p>
  
  <p>It perfectly works when I reach 300px before the bottom, but it doesn't work when I try to scroll 300px back.</p>
  
  <pre><code>document.addEventListener('scroll', function(event) {
    var docHeight = $(document).height();  // Document height
    var winHeight = $(window).height();    // Window height
    var minHeight = docHeight - winHeight; // Real document height
    var curHeight = $(window).scrollTop(); // Display the height according to scrolling
  
    $(window).scroll(function() {
      //BEFORE
      if(curHeight + 300 &gt; minHeight) {
        document.getElementById('copyrights').innerHTML = "Welcome to bottom";
      }
  
      //AFTER (doesn't work)
      if(curHeight - 300 == minHeight - 300) {
        document.getElementById('copyrights').innerHTML = "Good bye";
      }
    });
  });
  </code></pre>