0

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

我正在监听滚动事件并使用负顶部值更新固定位置 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 在页面顶部的固定位置元素如此不稳定？有什么方法可以简明扼要地解释它吗？

4

2 回答 2

1

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

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

于 2016-09-08T18:09:55.830 回答
0

这里有很多东西可以玩。移动设备没有台式机那么强大，动画有时可能会显得迟钝。特别是当页面中涉及 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。
于 2016-09-06T18:18:16.467 回答