Hello there, I'm new to this so please bear with me for any obvious mistakes, thank you :)
My goal is to have an image move from the center of the screen to the corner of the screen as you start scrolling. I've made some progress on this, but I've encountered an issue. When I scroll back to the top, the image doesn't return to its original position.
Appreciate any help in advance :)
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("logo").style.width = "70px";
document.getElementById("logo").style.margin = "0px";
document.getElementById("logo").style.position = "fixed";
} else {
document.getElementById("logo").style.width = "30%";
document.getElementById("logo").style.margin = "0 auto";
document.getElementById("logo").style.position = "relative";
}
}#logo {
width: 30%;
transition: 0.5s;
margin: 0 auto;
margin-top: 15%;
}
.scroll {
height: 1200px;
}<!Doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="https://use.typekit.net/siu5pjx.css">
</head>
<body>
<!--LOGO-->
<div id="logo">
<a href="<?php echo get_page_link( get_page_by_title( home )->ID ); ?>">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="100%">
</a>
</div>
<div class="scroll"></div>
</body>
</html>