title: Make content sticky on scroll to a point in jQuery
body: <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>