Javascript 页面滚动后的重新居中元素（带转换）

我有一个小聊天工具，只是一个小的方形div，在页面加载时，它绝对位于浏览器窗口的垂直中心。当用户向下滚动页面时，我希望小部件与页面一起滚动，即消失，但一旦滚动停止，聊天小部件将转换回垂直中心

我到处找，但似乎什么也找不到

最近的是这个

非常感谢您的帮助。如果可能的话，我宁愿避免使用jquery，而只使用vanilla JS

---

干杯，Richard我想如果你想让动画变得流畅，使用动画会更简单

let超时；
window.addEventListener（“滚动”，ev）=>{
clearTimeout（超时）；
超时=设置超时（（）=>{
动画({
目标：“.chat”，
顶部：window.scrollY+window.innerHeight/2，
放松：“放松”，
持续时间：500
});
}, 100);
});
。聊天{
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
背景：红色；
}
idk先生{
高度：400vh；
}

你好
Wow！非常感谢。效果很好。idk类div是做什么的？那只是为了测试让html有滚动条。非常感谢你，我真的很感谢你的时间。