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

我想定位一个DIV位于页面内，以便即使用户垂直滚动页面，用户也可以看到它。

该页面的顶部有一个标题，即75 px高的。现在，当用户位于页面顶部并且没有垂直滚动时，DIV必须位于标题下方。然而，一旦用户滚动页面导致标题消失，同样的DIV现在必须位于页面顶部（即靠近浏览器视口的顶部边缘）

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

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

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

Thanks!

这是您可以尝试的另一种替代方法。我用它来将工具栏 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()