I'm trying to create an effect where an image inside a div moves vertically downwards as the user scrolls, stopping only at the end of the page. I've attempted a solution using a script from another post, but it doesn't seem to be working.
HTML
<div id="wrapper">
<img src="images/samp_scroll.png" class="ïmage">
</div>
CSS:
#wrapper {
position: absolute;
}
.image {
width: 560px;
height: 700px;
}
Script:
window.onscroll = function (e) {
var vertical_position = 0;
if (pageYOffset)//usual
vertical_position = pageYOffset;
else if (document.documentElement.clientHeight)//ie
vertical_position = document.documentElement.scrollTop;
else if (document.body)//ie quirks
vertical_position = document.body.scrollTop;
console.log( vertical_position);
var your_div = document.getElementById('wrapper');
your_div.top = (vertical_position + 200) + 'px';//200 is arbitrary.. just to show you could now position it how you want
}
What am I missing here? Although I can see the value of vertical_position in the console, the code doesn't actually move the div element.
var your_div = document.getElementById("wrapper"); your_div.top = 400 + 'px';
Is there a better way to achieve this effect of moving HTML elements within a div? Are there any helpful articles or resources on this topic? I'm quite new to this and would appreciate any guidance.
Adding style before the top property seems to work initially, but it only applies the movement once as I scroll. Any suggestions?