Make content sticky on scroll to a point in jQuery
<p>I have a <code>div</code> that's set to <code>position: relative</code>. It becomes <code>fixed</code> when the top of the window reaches it. The div lives in a container (blue in the example below) and I would like to set it back to <code>relative</code> when it reaches the bottom of its parent container (blue).</p>

<p>This is my code simplified and my <a href="https://jsfiddle.net/julienfrog/p87jmj61/1/" rel="noreferrer"><strong>Fiddle</strong></a>:</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div class="green"&gt;&lt;/div&gt;

&lt;div class="blue"&gt;
  &lt;div class="sticky"&gt;Sticky&lt;/div&gt;
&lt;/div&gt;

&lt;div class="red"&gt;&lt;/div&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>.blue {
  background-color: blue;
  height: 500px;
}

.sticky {
  width: 200px;
  background-color: yellow;
  text-align: center;
  top: 0;
}

.red {
  background-color: red;
  height: 800px;
}

.green {
  background-color: green;
  height: 200px;
}
</code></pre>

<p><strong>And the jQuery:</strong></p>

<pre><code>$(document).ready(function() {
  var stickyTop = $('.sticky').offset().top;

  $(window).scroll(function() {
    var windowTop = $(window).scrollTop();

    if (stickyTop &lt; windowTop) {
      $('.sticky').css('position', 'fixed');
    } else {
      $('.sticky').css('position', 'relative');
    }
  });
});
</code></pre>