Javascript 更改滚动条上的Div显示元素

嗨，我在一个项目中有一个div，它具有

display=none

，直到它到达某个滚动位置，然后它会变为

display=block

这是有效的，也是伟大的，但不那么伟大的是变化的突然性。我想找到一种方法，让它轻松浏览，比如说，50像素

我要找的部门有这样的结构

<div class=section id=anchoredCtaWeb>
  <div class=container>
    <h1>Hello World</h1>
  </div>
</div>

你好，世界

这是我目前应用的样式和JS

<style>
#anchoredCtaWeb {
display: none;
position: sticky;
top: 0px;
}
</style>

<script>
document.addEventListener("scroll", function() {

if (window.pageYOffset > 817)
document.getElementById('anchoredCtaWeb').style.display = "block";

if (window.pageYOffset < 817)
document.getElementById('anchoredCtaWeb').style.display = "none";

});
</script>

#主播{
显示：无；
位置：粘性；
顶部：0px；
}
document.addEventListener（“滚动”，函数（）{
如果（window.pageYOffset>817）
document.getElementById（'anchoredCtaWeb'）.style.display=“block”；
如果（window.pageYOffset<817）
document.getElementById（'anchoredCtaWeb'）.style.display=“无”；
});

我知道它的表演方式和我写的一模一样，但我没有成功地将高度从0px转换为全高

---

非常感谢您的反馈，谢谢

您可以通过将

类添加到滚动的
#anchoredCtaWeb
中来完成此操作


document.addEventListener（“滚动”，函数（）{
const anchoredtaweb=document.getElementById（“anchoredtaweb”）；
如果（window.pageYOffset>817）{
anchoredtaweb.classList.add（“show”）；
}
如果（window.pageYOffset<817）{
anchoredtaweb.classList.remove（“show”）；
}
});
正文{
高度：600vh；
}
#主播{
位置：粘性；
变换：translateY（50px）；
不透明度：0；
可见性：隐藏；
顶部：10px；
}
#电视节目主持人{
变换：translateY（0px）；
不透明度：1；
能见度：可见；
过渡：0.5s缓进缓出；
}

你好，世界
谢谢@Manas！这非常有效，我确实在css中添加了一个height元素，因为在
visibility=hidden
中，div仍然是“可见的”。我感谢你的快速反应@kinzito17是的，你是对的，它仍然是“可见的”。