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

Issue

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.

Solution

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 By - Obsidian Age