Javascript JQuery scrollTop导致Chrome出现问题

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

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

我不熟悉编码，所以我真的需要一些帮助。我确信这和“窗口.滚动”有关，但我真的不知道

您可以访问我的网站：

我做了一把小提琴：

我已经将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

$（“文档”）.ready（函数（）{
flag=true；
$（窗口）。滚动（函数（）{
st=$（window.scrollTop（）；
如果（st>170）{
如果（国旗）；
$（“#flipBox_contain”）.css（“不透明度”、“0.2”）；
$（“#flipBox_contain”）.css（{“position”：“relative”}）；
}
否则，如果（st400）{
如果（国旗）；
$（“#introText”）.css（“不透明度”，“.2”）；
$（“#introText”）.css（{“position”：“relative”}）；
}
如果有的话（st500）{
如果（国旗）；
$（“psLogo”）.css（“top”，“0px”）；
$（“#psLogo”）.css（“不透明度”、“1”）；
$（“#psBar”）.css（“宽度”，“98%”）；
$（“#psLabel”）.css（“不透明度”，“1”）；
$（“#psSkill”）.css（“不透明度”，“1”）；
setTimeout（函数（）{
$（#aiLogo”）.css（“top”，“0px”）；
$（“#aiLogo”）.css（“不透明度”，“1”）；
$（“#aiBar”）.css（“宽度”，“93%”）；
$（“#aiLabel”）.css（“不透明度”，“1”）；
$（“#aiSkill”）.css（“不透明度”、“1”）；
}, 500);
setTimeout（函数（）{
$（“#htmlogo”）.css（“top”，“0px”）；
$（“#htmlogo”）.css（“不透明度”，“1”）；
$（“#htmlBar”）.css（“宽度”，“80%”）；
$（“#htmlLabel”）.css（“不透明度”，“1”）；
$（“#htmlSkill”）.css（“不透明度”，“1”）；
}, 1000);
setTimeout（函数（）{
$（“#cssLogo”）.css（“top”，“0px”）；
$（“#cssLogo”）.css（“不透明度”，“1”）；
$（“#cssBar”）.css（“宽度”，“80%”）；
$（“#cssLabel”）.css（“不透明度”，“1”）；
$（“#cssSkill”）.css（“不透明度”，“1”）；
}, 1500);
setTimeout（函数（）{
$（“#javaLogo”）.css（“top”，“0px”）；
$（“#javaLogo”）.css（“不透明度”，“1”）；
$（“#javaBar”）.css（“宽度”，“60%”）；
$（“#javaLabel”）.css（“不透明度”，“1”）；
$（“#javaSkill”）.css（“不透明度”，“1”）；
}, 2000);
setTimeout（函数（）{
$（“phpLogo”）.css（“top”，“0px”）；
$（“#phpLogo”）.css（“不透明度”，“1”）；
$（“#phpBar”）.css（“宽度”，“40%”）；
$（“#phpLabel”）.css（“不透明度”，“1”）；
$（“#phpSkill”）.css（“不透明度”，“1”）；
}, 2500);
/*setTimeout（function（）{$（“#psLabel”）.css（“不透明”，“1”）}
, 1600);
setTimeout（function（）{$（“#psSkill”）.css（“不透明”，“1”）}
, 2100)*/
}
否则，如果（st去掉
.wrapper
上的负z索引值。这不是有效值

有关更多信息，请参阅此部分。
问题终于解决了！经过相当多的“消除过程”故障排除后，问题归结为对z-index属性的简单误用。我使用z-index编辑了所有div，因此值是一致的，没有一个值太高（例如：200）或太低（例如：-99），而不是将它们全部设置为0、1或2。这解决了Chromes重新绘制的问题。希望这对其他人有所帮助。
请修复指向您的站点和JSFIDLE的链接。看起来您只是没有正确关闭功能，这可能会使您的代码出错。在某些情况下，您没有打开括号
{
，后跟
else if{
不带右括号
}
。
if（flag）；
的作用是什么？最好用括号明确：
if（flag）{…}
如果你刚刚开始。仅供参考，
$（“文档”）
返回jq空对象，
文档
是一个对象，你需要使用
$（文档）
。也就是说，由于jQuery内部使用的承诺，伪就绪处理程序甚至可以在空对象上工作。请注意，这与您的问题无关here@Amyth我修复了链接，谢谢你指出这一点。谢谢Mini。我知道z-index在技术上是不允许没有位置属性的，但是为了让一切正常工作，我必须向某些元素添加z-index。虽然我从
.wrapper
中删除了它，但一切仍然正常。问题是，如果Flipbox的任何父元素涉及任何定位，Flipbox不会翻转。这就是为什么我必须在JQuery的滚动事件中添加并删除它。所有内容都通过WC3 tho验证呃，所以我不确定是怎么回事。