Question

我目前在我的页面的右侧栏中有一个div（#sticky），并且在我滚动到它之后想要将其修复到页面顶部。我希望固定在页面顶部的div（#sticky）位于页面下方大约1000px。

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 :(在头部标签内）

<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（同样但没有空格）。

滚动到div然后将其修复到页面顶部

1 个答案: