使用Window.onscroll实现Div垂直移动的问题排查

嘿，我瞅见你遇到的问题了——滚动事件明明触发了，但目标div愣是纹丝不动对吧？问题出在你操作DOM元素位置的方式上，咱们一步步捋清楚：

核心问题拆解 #

你直接用mydiv.top来修改位置是完全错误的：DOM元素本身并没有top这个属性，要调整元素的位置，必须通过它的**样式对象（style）**来操作，而且必须带上单位（比如px），不然浏览器根本不知道你说的数值是什么单位。另外，你现在的逻辑是每次滚动都给top加230，这会让元素一直不受控地往下窜，而不是跟着滚动节奏移动，得改成基于滚动距离来计算位置才对。

修正后的完整代码 #

<script type="text/javascript">
window.onscroll = DoScroll;

function DoScroll() {
  var mydiv = document.getElementById("myFloatingDiv");
  // 基于页面滚动的垂直距离设置div的top，100是你想要的初始偏移量，可按需调整
  mydiv.style.top = window.scrollY + 100 + "px";
}
</script>

<style>
body {
  background-color: linen;
  margin-left: 50px;
  margin-right:60px;
  margin-top:15px;
}
.myFloatingDivCSS{
  position:absolute;
  left:50px;
  top:100px;
  /* 补全基础样式方便测试，比如宽高和背景色 */
  width: 200px;
  height: 100px;
  background-color: #eee;
}
</style>

<div id="myFloatingDiv" class="myFloatingDivCSS">我是跟着滚动走的浮动div</div>

额外补充说明 #

• window.scrollY代表当前页面垂直滚动的距离，用它加上你想要的固定偏移量，就能让div完美跟着滚动条同步移动。
• 如果你的需求是让div固定在某个位置不随滚动移动，其实用position: fixed的CSS属性就能实现，根本不需要JS；但看你用了absolute，所以用JS控制是合理的选择。
• 别忘记给div加上基础样式（比如宽高、背景色），不然可能看不到它的位置变化哦。

内容的提问来源于stack exchange，提问作者user1238784