Question

我希望有些天才可以帮助我调试我的JQuery功能。它适用于Firefox和Safari，但在Chrome上无法完全呈现背景。奇怪的是，如果我以任何方式调整浏览器窗口大小，它就会自行修复。

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

我是编码世界的新手，所以我真的可以使用一些帮助。我确信它与＆＃34; window.scroll＆＃34;有关。但我真的不知道。

您可以访问我的网站：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重新粉刷问题。希望这有助于其他人。

Answer 2

摆脱.wrapper上的负z-index值。这不是有效值。

有关详情，请参阅此link。

JQuery scrollTop会导致Chrome出现问题

2 个答案: