滚动后的Javascript粘性div

这个问题对这里的许多人来说可能很愚蠢。在纯JS中滚动后，我正在制作sticky div。有些人可能会建议在jQuery中使用它，但我对它不感兴趣。我需要的是类似的东西。在这里，div一直移动到顶部，但我需要它有60px的顶部。我写了一个脚本，但它不起作用。谁能帮我解决这个问题

这是我的密码

HTML

JS

window.onscroll=function（）
{
var left=document.getElementById（“左”）；
if（left.scrollTop<60 | | self.pageYOffset<60）{
left.style.position='fixed'；
left.style.top='60px'；
}else if（left.scrollTop>60 | | self.pageYOffset>60）{
left.style.position='绝对'；
left.style.margin-top='200px'；
}
}

这就是我需要达到的目标。页面加载时，左div必须具有

页边距顶部：200px

和

位置：绝对

。当用户滚动页面时，左div应该滚动，当它达到

top:60px时其位置和边距顶部应更改为
位置：固定
和
边距顶部：60px

这是CSS

#left {
  float:left;
  width:100px;
  height:200px;
  background:yellow;
  margin:200px 0 0;
}
#left.stick {
  position:fixed;
  top:0;
  margin:60px 0 0
}

添加了一个stick类，因此javascript不必做太多工作

JS

JavaScript区分大小写<代码>文档。getElementByID
不正确。它应该是
document.getElementById
。在那一行的末尾有一个流氓
，
。您没有定义一个名为
left
的变量。您可能打算使用字符串
“left”
查看上述评论员的修复程序的修复版本。您的问题没有意义。特别是最后一段。我能知道它没有意义的原因吗？我希望它能像这样工作。但它必须有
边际上限：60px
#left{
    float:left;
    width:100px;
    height:200px;
    background:yellow;
}

#right{
    float:right;
    width:100px;
    height:1000px;
    background:red;
    margin-top:200px;
}

window.onscroll = function()
{
    var left = document.getElementById("left");



    if (left.scrollTop < 60 || self.pageYOffset < 60) {
        left.style.position = 'fixed';
        left.style.top = '60px';
    } else if (left.scrollTop > 60 || self.pageYOffset > 60) {
        left.style.position = 'absolute';
        left.style.margin-top = '200px';
    }

}

#left {
  float:left;
  width:100px;
  height:200px;
  background:yellow;
  margin:200px 0 0;
}
#left.stick {
  position:fixed;
  top:0;
  margin:60px 0 0
}

    // set everything outside the onscroll event (less work per scroll)
var left      = document.getElementById("left"),
    // -60 so it won't be jumpy
    stop      = left.offsetTop - 60,
    docBody   = document.documentElement || document.body.parentNode || document.body,
    hasOffset = window.pageYOffset !== undefined,
    scrollTop;

window.onscroll = function (e) {
  // cross-browser compatible scrollTop.
  scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;

  // if user scrolls to 60px from the top of the left div
  if (scrollTop >= stop) {
    // stick the div
    left.className = 'stick';
  } else {
    // release the div
    left.className = ''; 
  }
}