JQuery scrollTop在Chrome中引起问题

Question

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

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

我是新的编码世界，所以我真的需要一些帮助。我确信这与"window.scroll“有关，但我真的不知道。

你可以访问我的网站：这里

我做了一个JFiddle：这里

我将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索引属性的简单误用。我用z索引编辑了所有的div，所以值是一致的，没有一个值太高(例如: 200)或太低(例如：-99)，相反，它们都是0、1或2。这解决了色度重新绘制的问题。希望这能帮到其他人。

Answer 2

去掉.wrapper上的负z-索引值。这不是一个有效值。

有关更多信息，请参见此链接。