Question

用户进入该网站。

此时，div位于页面中间。

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

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

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

Answer 1

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

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

非常基本的例子（live copy）：

CSS：

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

HTML：

<div id='box'>I'm the box</div>

JavaScript的：

window.onload = function() {

  function getScrollTop() {
    if (typeof window.pageYOffset !== 'undefined' ) {
      // Most browsers
      return window.pageYOffset;
    }

    var d = document.documentElement;
    if (d.clientHeight) {
      // IE in standards mode
      return d.scrollTop;
    }

    // IE in quirks mode
    return document.body.scrollTop;
  }

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

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

};

（在我的情况下，我总是将它保持在顶部下方2个像素，但如果您不想要，则可以相应地调整数字。）

Answer 2

http://jsfiddle.net/25rgq/

这是我所使用的所需功能的旧实现。这是我写的第一个脚本之一，所以JS＆amp; jQuery知道人们很可能会呕吐。我写这篇文章主要是因为我在网上找到的所有例子都集中在移动DIV而不是将其设置为固定，并且逐渐增加到框的顶部边缘导致了非常不稳定的移动。

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

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

Answer 3

正如你所看到的，其他人提供了准备好的脚本，但是如果你想让自己做一个（浪费时间）[或者你可能想学习] ..这是一个很好的开始点：

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

Answer 4

使用CSS：

div.sticky {
  position: sticky;
  top: 0;
}

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

4 个答案: