如何在滚动时移动一个div？

Question

我需要在用户滚动页面时移动一个div，但需要使用纯JavaScript实现。

position: fixed;会影响布局，而div的原始位置是相对于其他元素的。是否有一种简单的实现方式，利用像onscroll这样的事件来检测页面向上或向下滚动了多少像素，并根据需要更改div的位置？

该div只需要在垂直方向上移动。因此，如果我可以检测页面已滚动的像素数，我只需将其加减到div的位置即可。

- rubixibuc

---

到目前为止，您拥有的是...（在这里粘贴您已完成的代码片段） - Francisco Alvarado

Answer 1

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
}

- Jake

---

你太棒了:-) 在我尝试的每个浏览器中都完美地运行。非常感谢你的帮助。 - rubixibuc

@Jake 首先，你的代码中缺少 style，应该是 your_div.style.top 对吧？而且这只会移动一次 div，而不是随着我们滚动而移动。如果我错了，请纠正我！ - Ashwin

这段代码似乎运行得很好，但我很好奇，为什么没有花括号？ - teewuane