Moving Div with Scroll

rubixibuc picture rubixibuc · Apr 11, 2011 · Viewed 24.9k times · Source

I have to move a div when the scroll bar moves, but need to use pure javascript, and position:fixed will not work with the layout. The div's original poisition is relative to something else. Is there a simple implementation using and 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. Any help is greatly appreciated :-).

Answer

Jake picture Jake · Apr 11, 2011
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.top = (vertical_position + 200) + 'px';//200 is arbitrary.. just to show you could now position it how you want
}