Javascript 滚动至div，然后将其固定在页面顶部

目前，我的页面右栏中有一个div（#sticky），我想在滚动到该div后将其固定到页面顶部。我想固定在页面顶部的div（#sticky）位于页面下方约1000px处

HTML:

JAVASCRIPT：（在head标记内）

函数重新定位（）{
var window_top=$（window.scrollTop（）；
var div_top=$（'#粘性锚点'）.offset（）.top；
如果（窗口顶部>分区顶部）{
$（'#sticky'）.addClass（'stick'）；
}否则{
$（'#sticky'）。移除类（'stick'）；
}
}
$（函数（）{
$（窗口）。滚动（粘性重新定位）；
粘性_重新定位（）；
});

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

---

感谢您的任何帮助

你有一个CSS输入错误，而不是

#sticky.stick

使用

#sticky.stick

（相同的东西，但没有空格）。

是不是实际添加了

sticky

类？看这个小把戏：这是你发布的相同代码，只是纠正了输入错误。有没有可能您没有包括jQuery？小提琴似乎也没有做我想做的事情。它没有粘住，我从它旁边滚动过去。我对javascript很陌生，你说包含jQuery是什么意思？你是对的。最后我需要补充一下

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

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

<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>