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.
Advertisement
Answer
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 }