javascript - 为什么 Chrome for Mobile 不会重绘我的固定标题？

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 中的行为完全不是我所期望的。 header 通常没有动画，并且会在达到边界时立即出现或消失。当它制作动画时，性能会断断续续地不规则，并且通常只绘制一到三帧。使用桌面 Chrome 的移动仿真时不会出现此行为；它只发生在实际设备上。

这似乎只发生在处理页面顶部的固定位置元素时。如果我尝试以不同的方式更改固定元素，例如将其从侧面或底部移入，一切都会更接近预期。事实上，如果我改变固定位置的顶部元素和固定位置的侧元素，顶部元素的行为会更一致，like so .

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

Answer 1

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

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