title: jquery function sticky not working when end of parent div
body: <p>As you can see on <a href="https://jsfiddle.net/rkty0L3h/" rel="nofollow noreferrer">FIDDLE</a>, the problem is when its scrolling on the first section it works but when it reach the end of the first section it should disappear and appear again on the second section</p>
  
  <p>I have a working program but it's using "position:sticky" but I like to make similar effect but without using "position:sticky "</p>
  
  <p>My working fiddle when using position:sticky <a href="https://jsfiddle.net/dyc19oxL/" rel="nofollow noreferrer">my fiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $sticky = jQuery('.sticky');
  
  
  jQuery(window).on('scroll', function() {
    var scroll = jQuery(window).scrollTop();
    $sticky.each(function() {
      const $this = jQuery(this);
      const stickyTop = $this.offset().top;
      const stickyBottom = stickyTop + $this.outerHeight();
  
      const $stickyTo = $this.parent();
      const stickyToTop = $stickyTo.offset().top;
      const stickyToBottom = stickyToTop + $stickyTo.outerHeight();
  
      if (stickyBottom &gt;= stickyToBottom) {
        if (scroll &lt; stickyTop) {
          //$sticky.addClass('fixed').removeClass('abs');
        } else {
          //$sticky.addClass('abs');
        }
      } else if (scroll &gt; stickyToTop) {
        $(this).addClass('stuck');
      } else if (scroll &lt; stickyToTop) {
        $(this).removeClass('stuck');
      }
  
    })
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.stickyTo {
    border: 1px solid red;
    margin-bottom: 50px;
  }
  
  .content {
    height: 400px;
  }
  
  .sticky {
    display: none;
  }
  
  .stuck {
    display: block;
  }
  
  .row {
    background: #ccc;
  }
  
  .fixed {
    position: fixed;
    top: 0;
    bottom: auto;
  }
  
  .abs {
    position: absolute;
    bottom: 0;
    top: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;div class="grid-container"&gt;
  
    &lt;div class="top_picks"&gt;&lt;/div&gt;
    &lt;div class="stickyTo"&gt;
      &lt;div class="sticky" style="position:fixed; top: 100px;background:yellow"&gt;stick and unstuck on end of parent container&lt;/div&gt;
      &lt;div class="content"&gt;Content&lt;/div&gt;
    &lt;/div&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;div class="top_picks"&gt;&lt;/div&gt;
    &lt;div class="stickyTo"&gt;
      &lt;div class="sticky" style="position:fixed; top: 100px;background:yellow"&gt;another stick and unstuck on end of parent container&lt;/div&gt;
      &lt;div class="content"&gt;Content&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;!-- end grid-container --&gt;
  
  &lt;div style="height:800px;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>