Question

所以我将一个网站放在一起，这会在滚动事件上触发一些css3动画。在编写滚动动画的大约一半时，我注意到页面的标题和其他位置上有很多闪烁：固定元素。

我能做些什么来减少这种眨眼？（理想情况下没有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导航栏不再受任何动画的影响。

Answer 4

**Blinking Fixed Header issue I am facing only in Firebox. Animation property not supported by Firebox?**

*In below code i am applying tranform property to all column who has freeze_vertical class*


  var fixed_vertical_elts = document.getElementsByClassName(table_class + " freeze_vertical");

for (i = 0; i < fixed_vertical_elts.length; i++) {
   fixed_vertical_elts[i].style.webkitTransform = translate_y;
   fixed_vertical_elts[i].style.transform = translate_y;
   fixed_vertical_elts[i].style.background = "#fff";
}



*but one thing I observed once you open a debug mode, from that moment to until reload,fixed header not blink.*


Thanks in adavance

Answer 5

我通过将document.body.scrollTop和document.documentElement.scrollTop更改为> 1而不是> 50或> 25来解决此问题：

window.onscroll = function () {
    // Change the scrollTop conditions here.
    if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
        yourTopBarInnerElement.style.display = "none";
    } else {
        yourTopBarInnerElement.style.display = "block";
    };
};

至少对我有用。

Answer 6

使用to_categorical()代替position: sticky;；

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

6 个答案: