title: Use jQuery to detect when an element is near the bottom of the page
body: <p>I've got a script that works out the distance of a list of elements from the top of the page, but I am unsure how to detect it's distance from the bottom. When it hits the bottom (well, 20px before the bottom) I want to fire an event and fade it out:</p>
  
  <pre><code>$(window).on('load resize scroll', function () {
      $('.links__item').each(function () {
          if (($(this).offset().top - $(window).scrollTop()) &lt; 20) {
              $(this).stop().fadeTo(100, 0)
          } else {
              $(this).stop().fadeTo('fast', 1)
          }
      })
  })
  </code></pre>
  
  <p>If anyone has any advice, much appreciated. I'm looping through the elements to detect it, so when one of them hits 20px from the bottom, I want to fade it out. Thanks!</p>