【发布时间】：2014-05-07 11:17:00
【问题描述】：
我希望一些天才可以帮助我调试我的 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
【问题讨论】：
-
请修复指向您网站和 jsfiddle 的链接。
-
看起来你只是没有正确关闭你的函数，这可能会搞砸你的代码。在某些情况下，您没有左括号
{，后面是else if {，没有右括号}。 -
if(flag);是什么意思？如果您刚刚开始，请使用括号明确：if(flag){...}。 -
仅供参考，
$("document")返回 jq 空对象，document是一个对象，您需要使用$(document)。也就是说，由于 jQuery 内部使用了 Promise，伪就绪处理程序甚至可以在空对象上工作。请注意，这与您的问题无关 -
@Amyth 我修复了链接，感谢您指出这一点。
标签： javascript jquery css google-chrome scrolltop