Javascript 没有jQuery的Animate.css？

我正在尝试在页面滚动上制作动画

我使用Animate.css库

---

文档只展示了如何在jQuery中使用它，但我目前正在学习如何使用Vanilla Javascript。我尝试使用window.pageYOffset，但这仅在浏览器到达容器时有效，而在滚动显示容器时无效。

下面是一个示例，说明如何在没有jQuery的情况下设置动画。调查MDN文档页面

窗口.onscroll

中的滚动事件

const $item = document.querySelector('.starred-item');
$item && ($item.classList.add('animated', 'bounce'));

---

另一个没有jQuery（或任何其他库）的vanilla JS动画示例

var v=0；
varδ=1；
函数verticalMove（）{
redBox=document.getElementById（'verticalDiv'）
v+=δ；
redBox.style.top=v+“px”；
如果（v=50）δ=1；
}
功能启动移动（事件）{
设置间隔（垂直移动，30）；
event.target.onclick=“”；
}

.verticalDiv{
位置：绝对位置；
顶部：0px；
右：500px；
宽度：100px；
高度：100px；
背景：红色；
}