javascript - JQuery scrollTop 在 Chrome 中导致问题

Question

我希望一些天才可以帮助我调试我的 JQuery 函数。它在 Firefox 和 Safari 上运行良好，但在 Chrome 上无法完全渲染背景。奇怪的是，如果我以任何方式调整浏览器窗口的大小，它都会自行修复。

每当您在网站上向下滚动时，JQuery 还会导致顶部导航上的悬停属性中断。

我是编码领域的新手，所以我真的需要一些帮助。我确信它与“window.scroll”有关，但我真的不知道。

您可以访问我的站点:Here

我做了一个 JFiddle:Here

我在下面粘贴了我的 Javascript/JQuery:

$("document").ready(function() {
    flag=true;
    $(window).scroll(function(){
        st = $(window).scrollTop();
        if(st>170){
            if(flag);
            $("#flipBox_contain").css("opacity", ".2");
            $("#flipBox_contain").css({"position": "relative"});
        }
        else if(st<170){
            if(flag);
            $("#flipBox_contain").css("opacity", "1");
            $("#flipBox_contain").css("position", "");
        }
        if(st>400){
            if(flag);
            $("#introText").css("opacity", ".2");
            $("#introText").css({"position": "relative"});
        }
        else if(st<400){
            if(flag);
            $("#introText").css("opacity", "1");
            $("#introText").css("position", "");
        }
        if(st>500){
            if(flag);
            $("#psLogo").css("top","0px");
            $("#psLogo").css("opacity","1");
            $("#psBar").css("width","98%");
            $("#psLabel").css("opacity","1");
            $("#psSkill").css("opacity","1");
            setTimeout (function(){
                $("#aiLogo").css("top","0px");
                $("#aiLogo").css("opacity","1");
                $("#aiBar").css("width","93%");
                $("#aiLabel").css("opacity","1");
                $("#aiSkill").css("opacity","1");
            }, 500);
            setTimeout (function(){
                $("#htmlLogo").css("top","0px");
                $("#htmlLogo").css("opacity","1");
                $("#htmlBar").css("width","80%");
                $("#htmlLabel").css("opacity","1");
                $("#htmlSkill").css("opacity","1");
            }, 1000);
            setTimeout (function(){
                $("#cssLogo").css("top","0px");
                $("#cssLogo").css("opacity","1");
                $("#cssBar").css("width","80%");
                $("#cssLabel").css("opacity","1");
                $("#cssSkill").css("opacity","1");
            }, 1500);
            setTimeout (function(){
                $("#javaLogo").css("top","0px");
                $("#javaLogo").css("opacity","1");
                $("#javaBar").css("width","60%");
                $("#javaLabel").css("opacity","1");
                $("#javaSkill").css("opacity","1");
            }, 2000);
            setTimeout (function(){
                $("#phpLogo").css("top","0px");
                $("#phpLogo").css("opacity","1");
                $("#phpBar").css("width","40%");
                $("#phpLabel").css("opacity","1");
                $("#phpSkill").css("opacity","1");
            }, 2500);
            /*setTimeout (function(){$("#psLabel").css("opacity","1")}
            , 1600);
            setTimeout (function(){$("#psSkill").css("opacity","1")}
            , 2100)*/
        }
        else if (st<170){
            if(flag);
            $("#psLogo").css("top","100px");
            $("#psLogo").css("opacity","0");
            $("#psBar").css("width","0");
            $("#psLabel").css("opacity","0");
            $("#psSkill").css("opacity","0");
            setTimeout (function(){
                $("#aiLogo").css("top","100px");
                $("#aiLogo").css("opacity","0");
                $("#aiBar").css("width","0");
                $("#aiLabel").css("opacity","0");
                $("#aiSkill").css("opacity","0");
            }, 500);
            setTimeout (function(){
                $("#htmlLogo").css("top","100px");
                $("#htmlLogo").css("opacity","0");
                $("#htmlBar").css("width","0");
                $("#htmlLabel").css("opacity","0");
                $("#htmlSkill").css("opacity","0");
            }, 1000);
            setTimeout (function(){
                $("#cssLogo").css("top","100px");
                $("#cssLogo").css("opacity","0");
                $("#cssBar").css("width","0");
                $("#cssLabel").css("opacity","0");
                $("#cssSkill").css("opacity","0");
            }, 1500);
            setTimeout (function(){
                $("#javaLogo").css("top","100px");
                $("#javaLogo").css("opacity","0");
                $("#javaBar").css("width","0");
                $("#javaLabel").css("opacity","0");
                $("#javaSkill").css("opacity","0");
            }, 2000);
            setTimeout (function(){
                $("#phpLogo").css("top","100px");
                $("#phpLogo").css("opacity","0");
                $("#phpBar").css("width","0");
                $("#phpLabel").css("opacity","0");
                $("#phpSkill").css("opacity","0");
            }, 2500);
        }//--closes else if
        else{flag=false;}
    }); //--closes window.scroll function
}); //--closes document ready function

Answer 1

问题终于解决了!经过相当大的“消除过程”故障排除后，归结为对 z-index 属性的简单滥用。我使用 z-index 编辑了所有 div，因此值是一致的，并且没有一个太高(例如:200)或太低(例如:-99)，而是将它们全部设置为 0、1 或 2。这解决了 Chromes重绘问题。希望这可以帮助其他人。