当我向下滚动页面时，如何让 div 跟随我？

Question

用户进入网站。

此时，div在页面中间。

当他向下滚动页面时，div 首先开始向上移动，但一旦到达顶部，它就会停留在那里。

当他进一步向下滚动页面时，div 保持在顶部附近，始终对用户可见。

当他将页面一直向上滚动到顶部时，div 再次回到原来的位置。

Answer 1

您可以将scroll 事件挂接到window 对象上。处理事件时，请查看窗口/文档的垂直滚动位置（请参阅 SO 上的 this answer 了解如何执行此操作）。为您的div 使用绝对定位，并根据需要将其top 更新为坐标。

FWIW，我会非常小心地这样做。通常当用户滚动时，这是因为他们想要查看与页面上不同的内容。就个人而言，我讨厌在网页上跟随我的盒子。 :-) 但这并不意味着偶尔这样做没有充分的理由。

非常基本的示例 (live copy)：

// Make sure this is in a script tag at the end of the body,
// just prior to the closing </body> tag.

function getScrollTop() {
    if (typeof window.pageYOffset !== "undefined" ) {
        // Most browsers
        return window.pageYOffset;
    }
  
    var d = document.documentElement;
    if (typeof d.clientHeight !== "undefined") {
        // IE in standards mode
        return d.scrollTop;
    }
  
    // IE in quirks mode
    return document.body.scrollTop;
}

window.onscroll = function() {
  var box = document.getElementById("box");
  var scroll = getScrollTop();

  if (scroll <= 28) {
      box.style.top = "30px";
  } else {
      box.style.top = (scroll + 2) + "px";
  }
};

#box {
  /* Position absolutely, 30px down from the top */
  position: absolute;
  top: 30px;

  /* In my case I'm centering it in the window; do what you like */
  margin-left: -100px;
  left: 50%;
  width: 200px;

  /* These are just for my example */
  height: 1.25em;
  border: 1px solid #bbb;
  text-align: center;
}

<div id='box'>I'm the box</div>
<div style="height: 1000px"></div>

（就我而言，我总是将其保持在顶部下方 2 个像素处，但如果您不希望这样，可以相应地调整数字。）

Answer 2

您可以看到其他人提供了现成的脚本，但是如果您想自己制作一个（浪费时间）[或者您可能想学习].. 这是一个很好的起点：

var hscroll = (document.all ? document.scrollLeft : window.pageXOffset);
var vscroll = (document.all ? document.scrollTop : window.pageYOffset);

Answer 3

http://jsfiddle.net/25rgq/

这是您所需功能的旧实现，我已经使用过。这是我最早编写的脚本之一，所以知道 JS 和 jQuery 的人很可能会呕吐。我之所以写它，主要是因为我在网上找到的所有示例都集中在移动 DIV 而不是将其设置为固定，并且逐渐添加到框的上边距会导致移动非常不稳定。

基本上它会更改为固定，因为指定元素是浏览器窗口顶部的自定义设置边距，一旦它在我们的页脚之前达到自定义偏移量，它就会停止向下移动（我们希望限制跟随框不超过我们的侧边栏空间）。

希望它有任何用处，如果现在存在处理这个问题的插件，你可能会更好地使用它。