Question

我有一个标题，我想控制滚动时的可见性。向下滚动页面时，标题应该像任何元素一样运行。当向上滚动页面时，无论页面位置如何，我都希望在页面上升时显示标题。通过观察simple example可以最好地理解这种行为。

我正在侦听滚动事件并使用负顶值更新固定位置div：

$(function()
{
    var $header = $("#header");
    var $window = $(window);

    var headerHeight = $header.outerHeight();
    var headerY = $header.outerHeight();
    var scrollY = $window.scrollTop();

    $window.on("scroll", function()
    {
        headerY += scrollY - $window.scrollTop();
        if (headerY > headerHeight)
        {
            headerY = headerHeight;
        }
        else if (headerY < 0)
        {
            headerY = 0;
        }
        $header.css(
            {
                top: headerY - headerHeight,
            });
        scrollY = $window.scrollTop();
    });
});

然而，Chrome for Mobile中的行为完全不是我所期望的。标题通常不会生成动画，并且在满足边界时会立即显示或消失。当它进行动画处理时，性能暂时不规则，通常只绘制一到三帧。使用桌面Chrome移动仿真时，不会出现此问题;它只发生在实际设备上。

这似乎只在处理页面顶部的固定位置元素时发生。如果我试图以不同的方式改变固定元素，例如从侧面或底部移动它，一切都更接近预期。事实上，如果我改变固定位置顶部元素和固定位置侧元素，顶部元素将表现得更均匀like so。

为什么Chrome for Mobile如此不稳定，页面顶部有固定的位置元素？有什么方法可以简洁地解释它吗？

Answer 1

尝试使用一些硬件加速的CSS3转换。不要使用top来定位元素，请尝试使用transform:translateY。

还可以尝试在标题元素上添加transform:translateZ(0)。

Answer 2

这里有很多内容。移动设备并不像台式机那么强大，动画有时可能显得迟钝。特别是当页面中涉及CSS阴影时。

我不确定是什么导致了这种情况，但只要支持（我需要检查IE9等旧版浏览器的支持），我会尝试window.requestAnimationFrame功能。

这个想法是在移动GPU准备好重绘时（通常每16.6毫秒）重绘一次屏幕，而不是用无法及时处理的请求来淹没它。

所以我会尝试这样的事情（未经测试）：

$(function()
{
    var $header = $("#header");
    var $window = $(window);

    var headerHeight = $header.outerHeight();
    var headerY = $header.outerHeight();
    var scrollY = $window.scrollTop();
    var requestId;

    $window.on("scroll", function()
    {
        //run only when no request is pending.
        if (requestId === undefined) {
             requestId = window.requestAnimationFrame(animateHeader);
        }
    });

    function animateHeader() {
        requestId = undefined;

        headerY += scrollY - $window.scrollTop();
        if (headerY > headerHeight)
        {
            headerY = headerHeight;
        }
        else if (headerY < 0)
        {
            headerY = 0;
        }
        $header.css(
            {
                top: headerY - headerHeight,
            });
        scrollY = $window.scrollTop();
    }

});

由于我不确定这是否能解决任何问题，所以一旦你尝试了它就会有一些反馈意见！

应编辑已编辑的条件requestAnimationFrame。

为什么Chrome for Mobile重绘我的固定标题？

2 个答案: