Question

尝试通过更改javascript中的position:fixed css值来滚动top: div。 div不会移动，不知道为什么。

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/

为什么top css值没有变化，我怎么能这样做呢？请不要jquery。

Answer 1

两件事：

您应该使用 window.pageYOffset （document.documentElement.scrollTop在Chrome中不能很好地发挥作用）而不是scrollTop。
更新top后，您需要添加一个度量单位; 0以外的值应该附加px。

这可以在以下内容中看到：

＆＃13;

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);
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

希望这有帮助！：）

Answer 2

如果您检查控制台，您将看到console.log("yPos = " + yPos)始终为0，您最多更新代码如下：

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

提示：
获得srollTop（纯粹的js）的方法：

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

无法使用js

2 个答案: