用滚动动画闪烁站点中的固定标题

Question

所以我将一个网站放在一起，它将在滚动事件中触发一些css3动画。在编写滚动动画的大约一半时，我注意到页面标题和其他position：fixed元素上出现了很多闪烁。

有什么我可以做的以最小化此闪烁？ （理想情况下没有jQuery）

Answer 1

好吧，看来这个问题可能仅限于chrome和在滚动期间触发CSS动画时固定位置的元素呈现的速度。

我想看看this little trick是否可以硬件加速实际上不是chrome中CSS动画主题的元素。事实证明确实如此。 ：）

这是解决方法：

.topbar
{
    -webkit-transform: translate3d(0,0,0);
}

Answer 2

您的JavaScript代码可能有问题。我遇到了同样的问题

例如：

这是div闪烁的代码：

    window.onscroll = function () {
            var sticky = document.getElementById("sticky");
            var value = sticky.offsetTop;
                if(window.pageYOffset > value){
                    sticky.classList.add("sticky");
                    console.log("sticky");
                }else{
                    sticky.classList.remove("sticky");
                    console.log("nonsticky");
                }
            }

问题是我在滚动功能中声明了变量

解决方法：

        var sticky = document.getElementById("sticky");
        var value = sticky.offsetTop;

        window.onscroll = function () {
            if(window.pageYOffset > value){
                sticky.classList.add("sticky");
                console.log("sticky");
            }else{
                sticky.classList.remove("sticky");
                console.log("nonsticky");
            }
        }

Answer 3

transform: translate3d(0,0,0)未能解决我的情况，例如BS navbar。但是，我偶然发现了另一个解决方案，该解决方案解决了AOS，Animate.css以及WOW.js的问题。以我为例，当在移动设备（触摸设备）上浏览网站时，所有带有position: fixed的元素都具有不稳定的行为。

我发现here和here的方法确实完全解决了现有问题。将overflow-x: hidden;添加到包含动画的body a / o section元素中。

body { overflow-x: hidden; }

或

section { overflow-x: hidden; } //might be a different container element

最后，我的BS导航栏不再受任何动画的影响。