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

当我滚动过侧边栏后，它没有粘在顶部，我的主要内容（在侧边栏的右侧）占据了侧边栏的 space 并覆盖它。我不知道为什么会这样。

谢谢，任何想法都值得赞赏！

Answer 1

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

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

Fiddle 此处：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 - 滚动后的粘性侧边栏不起作用

jQuery - Sticky sidebar after scroll, doesn't work

html

css

sticky