javascript - 滚动到 div 然后将其固定到页面顶部

Question

我目前在页面的右侧栏中有一个 div (#sticky)，并且希望在我滚动到它时将其固定到页面顶部。我想固定在页面顶部的 div (#sticky) 位于页面下方约 1000 像素处。

HTML:

<div id="right-bar">
  <div id="sticky-anchor"></div>
  <div id="sticky"></div>
</div>

CSS:

#right-bar {
  display: inline-block;
  float: left;
  width: 336px;
  height: 10000px;
  margin-left: 15px;
}

#sticky {
  display: block;
  width: 334px;
  height: 600px;
  background-color: white;
  border: 1px solid #e5e5e5;
  margin-top: 15px;
}

#sticky .stick {
  position: fixed;
  top: 0;
  z-index: 10000;
}

JavaScript:(在 head 标签内)

<script>
  function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
  } else {
    $('#sticky').removeClass('stick');
  }
}

$(function () {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});
</script>

不太确定我做错了什么，但是一旦我滚动到 div，我就会绕过它而不会卡在页面顶部。

感谢任何帮助!

Answer 1

你有一个 CSS 拼写错误，而不是 #sticky .stick 使用 #sticky.stick (相同的东西但没有空格)。