Question

110

How can I move a div on scroll?

rated 0 times [ 115] [ 5] / answers: 1 / hits: 30312 / 13 Years ago, mon, april 11, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blaisep

Add To Favorites

Follow

Total Points: 748

Total Questions: 95

Total Answers: 108

Location: Federated States of Micronesia

Member since Sun, May 16, 2021

3 Years ago

blaisep questions

1 Change Center position of React leaflet map

Wed, Dec 16, 20, 00:00, 4 Years ago

1 Get JavaScript Map values as array?

Sun, Aug 16, 20, 00:00, 4 Years ago

1 How to do an inline for loop in JavaScript, that's not connected to a variable

Tue, Apr 7, 20, 00:00, 4 Years ago

1 How to write data to a file using Puppeteer?

Tue, Nov 12, 19, 00:00, 5 Years ago

1 Swiper coverflow effect not working as expected

Mon, Nov 11, 19, 00:00, 5 Years ago

View All

answered 13 Years ago kelleyamiahk · Accepted 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

}