Trouble changing css `top` value to fixed element with js

Question

Trying to move a position:fixed div on scroll by changing the top: css value in javascript. The div won't move though, not sure why.

html:

<div id="red">
  <div id="blue"></div>
</div>

css:

#red {
  position: relative;
  float: left;
  width: 100%;
  height: 1000px;
  background: rgba(255, 0, 0, 0.2);
  border: solid 2px #f0f;
}

#blue {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50vh;
  background: rgba(0, 0, 255, 0.2);
  border: solid 2px #0ff;
}

js:

window.addEventListener('scroll', function() {
  var yPos = -(Math.floor(document.body.scrollTop / 10));
  //console.log("yPos = " + yPos); //output is correct
  document.getElementById('blue').style.top = yPos + 'px';
  //document.getElementById('blue').setAttribute('top',yPos); //also tried this
});

https://jsfiddle.net/akzx43yL/

Why isn't the top css value changing and how can I get it to do so? No jquery please.

First off you definitely want to debounce your scroll event or you're browser will likely break out a sweat, next why don't you just change from position fixed to absolute when you start scrolling? — Dominik
– Dominik, Commented Dec 8, 2017 at 2:18
See jsfiddle.net/sjac0w67 . Seems like the .style.top = yPos in the js isn't actually having any effect regardless of the position style of the element. — A__
– A__, Commented Dec 8, 2017 at 2:22

Obsidian Age · Accepted Answer · 2017-12-08 02:24:28Z

2

Two things:

Instead of document.documentElement.scrollTop, you should use window.pageYOffset (scrollTop doesn't play nicely in Chrome).
You need to add a unit of measurement after you update top; values other than 0 should have px appened to them.

This can be seen in the following:

window.addEventListener('scroll', function() {
  var yPos = -(Math.floor(window.pageYOffset / 10));
  document.getElementById('blue').style.top = yPos + "px";

  // Optionally log the `top` value
  //console.log(document.getElementById('blue').style.top);
});

#red {
  position: relative;
  float: left;
  width: 100%;
  height: 1000px;
  background: rgba(255, 0, 0, 0.2);
  border: solid 2px #f0f;
}

#blue {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100vw;
  height: 50vh;
  background: rgba(0, 0, 255, 0.2);
  border: solid 2px #0ff;
}

<div id="red">
  <div id="blue"></div>
</div>

Hope this helps! :)

answered Dec 8, 2017 at 2:24

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

A__ Over a year ago

Thanks but it still doesn't look like blue is moving 10 times slower than scroll speed as described here: window.pageYOffset / 10... or am I missing something? See: jsfiddle.net/vptjxdyo

Obsidian Age Over a year ago

Your top value is still zero in your example. Your line of code document.getElementById('blue').style.top += yPos + 'px' won't work; you can't do addition with strings. Simply remove the + before the =; the value is updated automatically anyway :)

A__ Over a year ago

Okay but why isn't this working then: jsfiddle.net/200xjj8j ? Notice how the blue element does not scroll 1000 times slower than the red here... instead it scrolls normally as any absolutely positioned element would without any js.

Obsidian Age Over a year ago

You can't divide by 1000. I'm not really sure why, but that still doesn't update the top value. If you take the exact same code in your fiddle, and divide by 10 instead of 1000, it will work. Though note that you probably want to increase the value rather than decrease it :)

A__ Over a year ago

Oooooooh lol I thought dividing by 1000 would make it more noticeable for some reason. THANK YOU!

Colin Cline · Accepted Answer · 2017-12-08 02:20:59Z

1

If you check your console, you will be see your console.log("yPos = " + yPos) is always 0 you most update your code as follow:

window.addEventListener('scroll', function() {
    var yPos = -(Math.floor(document.documentElement.scrollTop / 10));
    console.log("yPos = " + yPos);
    document.getElementById('blue').style.top = yPos + "px";
});

Tip:
Ways to get srollTop (pure js):

var top  = window.pageYOffset || document.documentElement.scrollTop;

answered Dec 8, 2017 at 2:20

Colin Cline

1,2791 gold badge12 silver badges25 bronze badges

Comments

Adrian Mole · Accepted Answer · 2022-10-23 06:38:09Z

0

This is what worked for me:

document.getElementById('blue').style.top = yPos + "px";

edited Oct 23, 2022 at 6:38

Adrian Mole

52.2k193 gold badges61 silver badges101 bronze badges

answered Oct 19, 2022 at 13:02

user14239

15 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Trouble changing css `top` value to fixed element with js

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related