2

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

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

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

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

PS我考虑过使用CSSposition: fixed规则。它接近解决方案，但DIV只是卡在一个位置，我不能让它根据航向的可见性自适应地移动。

谢谢！

4

3 回答 3

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

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

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

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

    return false;
}

其他题外话：如果您的内容在 iframe 内，您也可以使用 $(window.parent).scrollTop() 而不是 $(window).scrollTop()

于 2011-08-22T02:36:22.740 回答
0

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

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

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

于 2010-04-01T16:25:21.140 回答
0

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

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

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

于 2010-04-01T16:37:43.960 回答