javascript - 使用 window.onscroll 事件检测页面/框架滚动

Question

我想在页面内放置一个 DIV，这样即使用户垂直滚动页面，用户也能看到它。

页面顶部有一个标题，高度为 75 px。现在，当用户位于页面顶部且未垂直滚动时，DIV 必须位于标题下方。然而，一旦用户滚动页面导致标题消失，相同的 DIV 现在必须位于页面顶部(即靠近浏览器视口(viewport)的顶部边缘)

我最关心的是浏览器对 window.onscroll 事件的支持。我检查了 QuirksMode 的兼容性(http://www.quirksmode.org/dom/events/scroll.html)。它似乎在 IE 和 Firefox 上具有良好的兼容性。然而，对 Safari 和 Chrome 的支持似乎有点古怪。这两种浏览器都在我的目标浏览器列表中。

谁能告诉我 window.onscroll 事件是否是检测页面/框架滚动的有效方法？还有其他建议吗？

附言我考虑过使用 CSS position: fixed 规则。它接近于解决方案，但 DIV 只是停留在一个位置，我无法让它根据标题的可见性自适应移动。

谢谢!

Answer 1

这是您可以尝试的另一种替代方法。我用它在页面顶部放置一个工具栏 div(也适用于 ipad)。

我没有使用 onScroll 事件，而是使用计时器每 500 毫秒触发一次，以通过 scrollTop 检测窗口滚动到的位置。如果愿意，您可以将计时器调整为大约 200 毫秒。

这是我的代码的精简示例:

此 jquery 代码检查名为“floatlayer”的 dom 元素 div(这是一个包含我的按钮工具栏的 div)何时以及是否准备就绪，然后调用函数 setRepeater

$(#floatlayer").ready(function () {
    return setRepeater();
});

然后，这个函数创建了一个定时器，每 500 毫秒持续执行函数“keepIncrease”

 function setRepeater() {
        aTimer = window.setInterval("keepIncrease()", 500);
        return false;
    }

这是函数 keepIncrease()，每 500 毫秒重复一次，负责根据当前窗口滚动位置定位工具栏 div:

function keepIncrease() {
    var divToolbar = $("#floatlayer")[0];

    var currentPos =  $(window).scrollTop();
    divToolbar.style.top = currentPos + "px";

    return false;
}

题外话: 如果您的内容在 iframe 中，您还可以使用 $(window.parent).scrollTop() 而不是 $(window).scrollTop()