靜態和固定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提供了一個生活示例。