I have to move a div when the the user scrolls, but need to use pure JavaScript.
position: fixed;
will not work with the layout. The div's original position is relative to something else. Is there a simple implementation using an event like onscroll
, to detect how many pixels the page moved up or down, and change the position of the div accordingly?
The div only needs to move vertically. So if I can detect how many pixels the page has moved I can just add or subtract that to the location of the div.
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;
var your_div = document.getElementById('some_div');
your_div.style.top = (vertical_position + 200) + 'px';//200 is arbitrary.. just to show you could now position it how you want
}