JQuery scrollTop在Chrome中导致问题
JQuery scrollTop causes problems in Chrome
我希望一些天才可以帮助我调试我的JQuery函数。它在Firefox和Safari上运行良好,但在Chrome上却无法完全渲染背景。奇怪的是,如果我以任何方式调整浏览器窗口的大小,它会自行修复。
当你向下滚动网页时,JQuery也会导致顶部导航栏的悬停属性失效。
我是一个编码新手,所以我真的需要一些帮助。我确信它与"窗口"有关。但我真的不知道。
你可以访问我的网站:这里
我创建了一个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
问题终于解决了!经过大量的"排除过程"排除后,它归结为对z-index属性的简单误用。我用z-index编辑了所有div,所以值是一致的,没有一个太高(例如:200)或太低(例如:-99),而不是使它们全部为0,1或2。这就解决了铬的重漆问题。希望这能帮助到其他人。
去掉.wrapper
的负z-index值。这不是一个有效值
相关文章:
- chrome中的Facebook JavaScript SDK Connect问题
- Angularjs ng-options 问题仅适用于 Chrome 浏览器
- 火狐中的多个问题,但在 chrome 中工作正常,没有一个问题
- 在 Chrome 扩展程序中将鼠标悬停在广告上使用时遇到问题
- Chrome 中的 JavaScript 问题
- Chrome 中的 Dropbox Chooser API 问题
- Chrome's表格布局:修复了更改表格宽度后无法正常工作的问题
- chrome扩展的内容安全策略问题
- 在Google Chrome中打印iFrame时出现问题
- Chrome动画CSS3三维立方体与悬停状态问题
- Cookie不适用于Chrome,但它'使用Firefox(localhost)没问题
- Google Chrome 问题与 css 和 JScript
- 使用 jquery 在 chrome 上浮点更改问题
- jQuery fadeOut / fadeIn Chrome 中的滚动问题
- 设置超时功能在 chrome 扩展程序弹出窗口.js问题
- 如何在文本框点击事件中设置文本框中字符的第一个位置---Chrome问题
- 通过Chrome自定义插件在浏览器当前页面中选择元素的问题
- Java脚本(根本没有)被I.E.或Firefox执行,但Chrome没有问题
- 内容菜单和打开标签页的问题 - Chrome 扩展程序
- 如何修复此本地数据问题?(Chrome扩展、Javascript、jQuery)