Question

我想创建一个带有模糊导航栏的网站。导航栏是固定的，当您开始向下滚动时会更改高度。导航栏内有一些菜单项，当您单击其中一个侦听项时，页面开始滚动到所选的MenuPoint。我用这个函数来解决这个问题：

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
};

到目前为止没有任何问题，正如我在开始向下滚动时高度变化之前所说的那样。在页面顶部，当您向下滚动100px时，导航栏的高度为100px，并且导航栏缩小到50px的大小。滚动到页面顶部时会发生同样的事情，一旦达到100px，导航栏就会获得100px的全高。这是代码：

var headerDown = true;
scroll = $(document).scrollTop();
var headerHeight = $('.header').height();

    if(scroll < 100){
        if(headerHeight !== 100 && headerDown === false){
            headerDown = true;
            $('.header').animate({
                height: "100px"
            }, 400);

            var menuAnimation = 100/2 - navbarHeight/2;
            $('.vcenter').animate({
                paddingTop: menuAnimation + "px"
            }, 400);
        }
    } else {
        if(headerHeight !== 50 && headerDown === true){
            headerDown = false;
            $('.header').animate({
                height: "50px"
            }, 400);

            var menuAnimation = 50/2 - navbarHeight/2 + 5;
            $('.vcenter').animate({
                paddingTop: menuAnimation + "px"
            }, 400);
        }   
    }

到目前为止一切正常。由于您无法模糊iOS 7中的图层，因此我使用html2Canvas“http://html2canvas.hertzen.com”从侧面制作屏幕截图并将其附加到标题中。比我用CSS Webkit Filter模糊这个截图。最后要做的事情我从侧面跟踪滚动并将其设置为等于模糊的屏幕截图，因此它与网站滚动，导航栏后面的所有内容看起来都像实际的侧面模糊。

现在我的问题是，当我点击网站开始滚动的其中一个菜单项时。它工作得很完美，但是一旦网站滚动并改变高度，滚动动画内部的模糊画布非常不稳定，它就像地狱一样。

在Chrome中一切都运行得很好，但在Safari上却落后了。所以我开始寻找失败。我认为问题是滚动动画和运行simultan的高度动画，当事实上在div中。我认为另一个问题是我使用了溢出：隐藏在CSS中。我在博客中看到解决方案是使用： -webkit-transform: translateZ(0);

但它不能很好地工作，一方面仍然有点滞后，并且无法在CPU上进行渲染。所以我要求另一个解决方案。

如果您还需要更多信息，请索取！感谢您的帮助，对不起我的英语！

如何防止Safari浏览器中滚动功能和动画引起的滞后？

0 个答案: