<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>
I have this JavaScript that makes the header div scroll down and stay in a fixed position at 320px, the only problem is that the header pops up roughly. How can I make the transition between static position to fixed smoothy?
Try this for both of your conditions:
document.getElementById("header").style.transition = "all 2s";
A life example is given in W3school here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.