title: jQuery - Sticky sidebar after scroll, doesn't work
body: <p>I want to use code from <a href="https://jsfiddle.net/livibetter/HV9HM/" rel="nofollow noreferrer">this link</a> to make a sticky sidebar. My purpose is to make the sidebar stick to top when I scroll past it. I try to adapt this method on my code but it doesn't work.</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>$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
  });
  
  $(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y &gt; 400) {
      $('.navbar-bottom').fadeIn();
    } else {
      $('.navbar-bottom').fadeOut();
    }
  });
  
  function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sidebar-anchor').offset().top;
    if (window_top &gt; div_top) {
      $('.sidebar').addClass('sticky');
      $('#sidebar-anchor').height($('#sticky').outerHeight());
    } else {
      $('.sidebar').removeClass('sticky');
      $('#sidebar-anchor').height(0);
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sidebar {
    float: left;
    width: 224px;
    padding-right: 16px;
  }
  .sticky {
    margin-top: 0 !important;
    position: fixed;
    top: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="sidebar-anchor"&gt;&lt;/div&gt;
  &lt;div class="sidebar"&gt;
    &lt;div class="search-wrapper"&gt;
      &lt;input class="search-shop" type="text" placeholder="Cari di Toko Ini"&gt;
      &lt;img class="magnifier-shop" src="img/search-grey.png"&gt;
    &lt;/div&gt;
    &lt;div class="filter"&gt;
      &lt;div class="filter-accordion"&gt;
        Filter
        &lt;span&gt;
            &lt;img class="arrow-down" src="img/down.png"&gt;
           &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="etalase"&gt;
      &lt;h2&gt;Etalase&lt;/h2&gt;
      &lt;ul&gt;
        &lt;li class="active"&gt;&lt;span class="etalase-name"&gt;Semua Etalase&lt;/span&gt;&lt;span class="etalase-count"&gt;193&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;span class="etalase-name"&gt;Produk Terjual&lt;/span&gt;&lt;span class="etalase-count"&gt;193&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;span class="etalase-name"&gt;Tas Slempang&lt;/span&gt;&lt;span class="etalase-count"&gt;45&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;span class="etalase-name"&gt;Tas Ransel&lt;/span&gt;&lt;span class="etalase-count"&gt;39&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;span class="etalase-name"&gt;JAKET HOODIE&lt;/span&gt;&lt;span class="etalase-count"&gt;39&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;span class="etalase-name"&gt;Gadget 2nd&lt;/span&gt;&lt;span class="etalase-count"&gt;39&lt;/span&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="notes"&gt;
      &lt;div class="notes-title"&gt;Cek sebelum berbelanja&lt;/div&gt;
      &lt;ul&gt;
        &lt;li&gt;Perihal Stok, Pengiriman, dan Pemesanan&lt;/li&gt;
        &lt;li&gt;Kontak Saya&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my jQuery. As you can see I also use scrolling method to stick a navbar and it works, but the sticky sidebar doesn't work.</p>
  
  <pre><code>$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
  });
  
  $(document).scroll(function() {
   var y = $(this).scrollTop();
    if (y &gt; 400) {
      $('.navbar-bottom').fadeIn();
    } else {
      $('.navbar-bottom').fadeOut();
    }
  });
  
  function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sidebar-anchor').offset().top;
    if (window_top &gt; div_top) {
      $('.sidebar').addClass('sticky');
      $('#sidebar-anchor').height($('#sticky').outerHeight());
    } else {
      $('.sidebar').removeClass('sticky');
      $('#sidebar-anchor').height(0);
    }
  }
  </code></pre>
  
  <p>After I scroll past the sidebar, it doesn't stick to top and my main content (on the right of the sidebar) occupy the space of the sidebar and overlay it. I have no idea why would this happen.</p>
  
  <p>Thank you, any idea appreciated!</p>