Question

我想在页面中放置一个DIV，即使用户垂直滚动页面，它也会对用户可见。

页面顶部有一个标题75 px高。现在，当用户位于页面顶部且未垂直滚动时，必须在标题下方提出DIV。但是，一旦用户滚动页面导致标题不在视线范围内，相同的DIV现在必须位于页面顶部（即靠近浏览器视口的顶部边缘）

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

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

P.S。我考虑过使用CSS position: fixed规则。它接近解决方案，但DIV只是粘在一个位置上，我不能根据标题的可见性自适应地移动。

谢谢！

Answer 1

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

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

这是我的代码的精简样本：

这个jquery代码检查我的dom元素div命名为“floatlayer”（这是一个包含我的按钮工具栏的div）的时间，然后调用函数setRepeater

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

然后，这是一个创建计时器的功能，以便每隔500毫秒继续执行“keepIncrease”功能

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

这是函数keepIncrease（），它每500ms重复一次，并负责根据当前窗口滚动位置定位工具栏div：

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

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

    return false;
}

主题之外的其他内容：如果你的内容在iframe中，你也可以使用$（window.parent）.scrollTop（）而不是$（window）.scrollTop（）

Answer 2

~~为什么不使用“固定”？~~

哦，我明白了，我错过了关于标题的部分。

但你仍然可以使用position：fixed选项。您最初只需将“body”设置为“body”（占75px间隙），一旦标题保持可见性，您可以将div重新对准视口顶部。但是，如果不以某种方式使用onscroll，您可能无法做您想做的事情。有时你只需要做出决定：我想要更多功能，还是更多人？

Answer 3

如果您在Quirksmode上阅读了WebKit中的笨拙，您会注意到以下内容：

Safari（但不在iPhone上）和Chrome似乎监视scrollTop访问，以确定用户是否滚动了一个元素。我的测试脚本的日志功能定期更改scrollTop，Safari通过触发滚动事件来响应。由于此事件的记录再次更改了log元素的scrollTop，因此将连续触发滚动事件。所有这些都发生在页面底部的log元素没有滚动条时，当它有正常溢出时：可见，甚至当我每次记录一个新事件时将scrollTop设置为0时。只有当我完全删除scrollTop行时才会停止错误行为。

此问题不应影响您尝试实现的目标，因为您未设置任何元素的scrollTop。您正在将onscroll附加到窗口，无论如何，这似乎在任何浏览器之间都没有问题。

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

3 个答案: