静态和固定div标头之间的平滑过渡

Question

<script>
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 320 || document.documentElement.scrollTop > 
320) {
document.getElementById("header").style.position = "fixed";
} else {
document.getElementById("header").style.position = "static";
}
}
</script>

我有这个JavaScript，可以使标头div向下滚动并保持在320px的固定位置，唯一的问题是标头会突然弹出。如何在静态位置到固定平滑之间过渡？

Answer 1

针对您的两个条件都尝试此操作：

document.getElementById("header").style.transition = "all 2s";

在W3school here中给出了一个生活示例。