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

Question

用户进入该站点.

此时,div位于页面的中间.

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

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

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

Answer 1

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

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

非常基本的例子(实时复制):

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个像素,但如果你不想要,你可以相应地调整数字.)