為什么Chrome for Mobile無法重繪我的固定標題？

Question

我有一個標題，我想控制滾動時的可見性。 向下滾動頁面時，標題應像任何元素一樣運行。 向上滾動頁面時，無論頁面位置如何，我都希望在頁面上升時顯示標題。 通過觀察一個簡單的示例可以最好地理解這種行為。

我正在偵聽滾動事件並使用負的最高值更新固定位置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的移動設備仿真時，不會表現出這種現象； 它僅在實際設備上發生。

這似乎僅在頁面頂部處理固定位置元素時發生。 如果我嘗試以不同的方式更改固定的元素（例如從側面或底部移入），那么一切都將更加接近預期。 實際上，如果同時更改固定位置的頂部元素和固定位置的側面元素，則頂部元素的行為將更加均勻， 就像這樣 。

為什么Chrome for Mobile在頁面頂部的固定位置元素如此不穩定？ 我有什么辦法可以簡潔地解釋它嗎？

Answer 1

嘗試使用一些硬件加速的CSS3轉換。 而不是使用top來放置元素，請嘗試使用transform:translateY 。

另外，嘗試在標頭元素上添加transform:translateZ(0) 。

Answer 2

這里有很多活動。 移動設備的功能不如台式機和動畫有時顯得遲鈍。 尤其是當頁面中包含CSS陰影時。

我不確定是什么原因造成的，但是只要有支持，我都會嘗試window.requestAnimationFrame函數（您需要檢查是否支持較舊的瀏覽器，例如IE9）。

想法是只要移動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應該被調用。