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 时，它会从文档流中移除，它相对于视口(viewport)定位并且不会在它通常所在的页面。

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

在这里 fiddle :https://jsfiddle.net/bdqLwzfm/ .

---

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

---

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