title: Not able to make element stick to the bottom when offscreen in IE 11, just like in css sticky
body: <p>I am trying to replicate the same behavior as in this
  <a href="https://codepen.io/elad2412/pen/MZZVjw" rel="nofollow noreferrer">codepen</a> in IE 11 (does not have css sticky)</p>
  <p>I am able to detect when the item is offscreen at the start with:</p>
  <pre><code>if (
    $(&quot;.main-content&quot;).height() + $(&quot;.main-content&quot;).offset().top &lt;
    $(&quot;.main-footer&quot;).offset().top
  )
  </code></pre>
  <p>but then after it reaches the end of the scroll (in this case the page), I did not manage to check when it goes offscreen again. It is probably something simple as subtracting the scroll to figure out if the element is offscreen, I am just stuck...</p>
  <p>Here is a <a href="https://codepen.io/deleite/pen/GRqNVrR" rel="nofollow noreferrer">codepen</a> where I stuck am now.</p>