jQuery - 滚动后的粘性侧边栏，不起作用

Question

我想使用来自this link 的代码来制作一个粘性侧边栏。我的目的是让侧边栏在我滚动过去时粘在顶部。我尝试在我的代码上调整此方法，但它不起作用。

$(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>

这是我的 jQuery。如您所见，我也使用滚动方法粘贴导航栏，它可以工作，但粘性侧边栏不起作用。

$(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);
  }
}

滚动经过侧边栏后，它不会停留在顶部，并且我的主要内容（在侧边栏的右侧）占据了侧边栏的空间并将其覆盖。我不知道为什么会发生这种情况。

谢谢你，任何想法表示赞赏！

Answer 1

您的粘性侧边栏不起作用，因为当您将其位置设置为fixed 时，它会从文档流中移除，它相对于视口定位，并且不会在页面中留下通常的间隙已经找到了。

我的建议是在.sidebar 中创建一个子div - 我们将其命名为.sidebar-content，它将表现为一个粘性元素。 此外，当.sidebar-content 变得粘滞时，我们必须为其父级设置适当的高度，以防止页面中的其他内容超出我们的侧边栏。

在这里调琴：https://jsfiddle.net/bdqLwzfm/。

---

另外，如果页面中有很多滚动事件，我建议尝试以下插件：http://imakewebthings.com/waypoints/.
它具有粘性元素的扩展名：http://imakewebthings.com/waypoints/shortcuts/sticky-elements/。

---

更多关于 CSS 位置属性的信息：
https://css-tricks.com/almanac/properties/p/position/
https://tympanus.net/codrops/css_reference/position/