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时，它会从文档流中移除，它相对于视口定位，并且它不会在页面中留下空隙通常会找到。

我的建议是在div内创建一个小孩.sidebar - 让它命名为.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/

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

1 个答案: