CODEWITHSUNDEEP
jqueryhtmlcsssticky
Dolorosa
Dolorosa

Reputation: 573

jQuery - Sticky sidebar after scroll, doesn't work

I want to use code from this link 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.

$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 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 > div_top) {
    $('.sidebar').addClass('sticky');
    $('#sidebar-anchor').height($('#sticky').outerHeight());
  } else {
    $('.sidebar').removeClass('sticky');
    $('#sidebar-anchor').height(0);
  }
}
.sidebar {
  float: left;
  width: 224px;
  padding-right: 16px;
}
.sticky {
  margin-top: 0 !important;
  position: fixed;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-anchor"></div>
<div class="sidebar">
  <div class="search-wrapper">
    <input class="search-shop" type="text" placeholder="Cari di Toko Ini">
    <img class="magnifier-shop" src="img/search-grey.png">
  </div>
  <div class="filter">
    <div class="filter-accordion">
      Filter
      <span>
		  						<img class="arrow-down" src="img/down.png">
		  					</span>
    </div>
  </div>
  <div class="etalase">
    <h2>Etalase</h2>
    <ul>
      <li class="active"><span class="etalase-name">Semua Etalase</span><span class="etalase-count">193</span>
      </li>
      <li><span class="etalase-name">Produk Terjual</span><span class="etalase-count">193</span>
      </li>
      <li><span class="etalase-name">Tas Slempang</span><span class="etalase-count">45</span>
      </li>
      <li><span class="etalase-name">Tas Ransel</span><span class="etalase-count">39</span>
      </li>
      <li><span class="etalase-name">JAKET HOODIE</span><span class="etalase-count">39</span>
      </li>
      <li><span class="etalase-name">Gadget 2nd</span><span class="etalase-count">39</span>
      </li>
    </ul>
  </div>
  <div class="notes">
    <div class="notes-title">Cek sebelum berbelanja</div>
    <ul>
      <li>Perihal Stok, Pengiriman, dan Pemesanan</li>
      <li>Kontak Saya</li>
    </ul>
  </div>
</div>

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.

$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});

$(document).scroll(function() {
 var y = $(this).scrollTop();
  if (y > 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 > div_top) {
    $('.sidebar').addClass('sticky');
    $('#sidebar-anchor').height($('#sticky').outerHeight());
  } else {
    $('.sidebar').removeClass('sticky');
    $('#sidebar-anchor').height(0);
  }
}

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.

Thank you, any idea appreciated!

Upvotes: 0

Views: 1534

Answers (1)

andreivictor
andreivictor

Reputation: 8461

Your sticky sidebar does not work because, when you set its position to fixed, it is removed from the document flow, it is positioned relative to the viewport and it does not leave a gap in the page where it would normally have been located.

My suggestion is to create a child div inside the .sidebar - let's name it .sidebar-content, which will behave as a sticky element. Also, when the .sidebar-content becomes sticky, we must set the appropiate height to its parent, in order to prevent the other content from the page to get over our sidebar.

Fiddle here: https://jsfiddle.net/bdqLwzfm/.

Also, if you have a lot of scroll events in the page, I would suggest trying the following plugin: http://imakewebthings.com/waypoints/.
It has an extension for sticky elements: http://imakewebthings.com/waypoints/shortcuts/sticky-elements/.

More info about CSS position property:
https://css-tricks.com/almanac/properties/p/position/
https://tympanus.net/codrops/css_reference/position/

Upvotes: 2

Related Questions