Javascript 将容器固定在底部，直到窗口。页面偏移大于容器的原始位置

一旦用户滚动到

stickInDiv

的顶部，我将固定容器

stickyDiv

在视口底部的位置，直到其原始位置（我从文档顶部计算）首先显示在视口底部。之后，容器应保持在其原始位置。向上滚动时，它的原始位置到达视口底部后，应再次固定到视口底部

当前行为：

stickyDiv

一旦到达视口底部的原始位置，就不会停留在其原始位置

window.onscroll=function（）{
滚动函数（）；
};
函数getTop（elem）{
const box=elem.getBoundingClientRect（）；
const body=document.body；
const docEl=document.documentElement；
const scrollTop=window.pageYOffset | | | docEl.scrollTop | | | body.scrollTop；
const clientTop=docEl.clientTop | body.clientTop | 0；
const top=box.top+scrollTop-clientTop；
返回数学圆（顶部）
}
const stickyDiv=document.getElementById（'stickyDiv'）；
const stickyelmtopfromdocumenttop=getTop（stickyDiv）；
常数高度=stickyDiv.clientHeight；/*粘性元件的高度*/
const stickInDiv=document.getElementById（'stickInDiv'）；
常数stickInDivOffsetTop=stickInDiv.offsetTop；
函数滚动函数（）{
如果（window.pageYOffset>stickyElemTopFromDocumentTop）{
stickyDiv.classList.remove（'sticky'）；
}else if（window.pageYOffset>stickInDivOffsetTop）{
stickyDiv.classList.add（'sticky'）；
}否则{
stickyDiv.classList.remove（'sticky'）；
}
}

#contentAtTop{
高度：100px；
背景颜色：蓝色；
不透明度：0.2；
颜色：白色；
}
#contentBeforeStickyDiv{
高度：1200px；
背景颜色：绿色；
颜色：白色；
不透明度：0.8；
}
#粘滞的{
颜色：白色；
背景颜色：灰色；
高度：40px；
}
#内容提要{
高度：400px；
背景颜色：紫色；
颜色：白色；
不透明度：0.8；
}
.粘的{
位置：固定；
底部：0；
宽度：100%；
}

顶部内容
粘性Div之前的内容
粘性容器
粘性Div后的内容