元素闪烁很丑，难解决。
修改 Class 而不是 Style
我在不久前做过一个导航栏，要求其滚动到屏幕顶端后固定。很常见。开始的时候没问题，很快就可以搞定。
nav {
position: absolute;
top: 60px;
}
var scroll=0;
var nav=$("nav");
var navST=60; //该元素距离网页顶端60px
$(window).scroll(function(){
if($(document).scrollTop()>navST && scroll==0){
nav.css({position: "fixed",top: "0"});
scroll=1;
}
else if($(document).scrollTop()<=navST && scroll==1){
nav.removeAttr("style");
scroll=0;
}
});
运行很流畅。
做好，我自然就忙着网页内容去了。没曾想，随着页面 JS 的不断增加，导航栏在固定时出现了可怕的闪动。
唔，就是 一下看得见 一下看不见 的东西！
应该有不少人和我一样。百度，无果。谷歌，看不懂，翻译也不行。
不知道真相的我，眼泪 流下来。
哦！一道莫名的亮光从我的眼前闪过！这道亮光里，有希望，，有兴奋，，组成了四个大字：
元素重绘
就在这千万分之一秒，亿万分之一秒 里，我理解了：
nav.css({position: "fixed",top: "0"});
这一句 JS 产生了两次 DOM 写入，影响浏览器渲染页面两次。
使用 $.addClass 语句可以解决。
nav {
position: absolute;
top: 60px;
}
.fixed {
position: fixed;
top: 0;
}
var scroll=0;
var nav=$("nav");
var navST=60; //该元素距离网页顶端60px
$(window).scroll(function(){
if($(document).scrollTop()>navST && scroll==0){
nav.addClass("fixed");
scroll=1;
}
else if($(document).scrollTop()<=navST && scroll==1){
nav.removeClass("fixed");
scroll=0;
}
});
闪烁问题得到了临时解决。
采用不可见元素减少 DOM 变更产生的运算
“临时” 说法的原因是当 JS 数量再次增加，达到又一新高度后，闪烁问题再现。
原因大概是 $.addClass 时浏览器需要重新计算该元素位置， JS 数量过多使计算过程明显。
不多说，在 HTML 里多放一个包含 .fixed 的宽高为 0 的元素即可解决。
别让这个 div.fixed 显示出来。
至此，全面解决 “动态添加样式导致的元素闪烁” 。
原生 JS 进一步加快速度避免闪烁
jQuery 是个好东西。原生 JS 更是个好东西。
有些 jQuery 代码，被转化为好多条原生 JS 才实现效果。
然而其实只需要一条。
将 jQuery 代码转化为原生 JS 是个加快速度，避免闪烁的不二选择。
var scroll=0;
var navST=60; //该元素距离网页顶端60px
window.onscroll = function(){
if(document.documentElement.scrollTop || document.body.scrollTop>navST && scroll==0){
document.getElementsByTagName("nav")[0].classList.add("fixed");
scroll=1;
}
else if(document.documentElement.scrollTop || document.body.scrollTop<=navST && scroll==1){
document.getElementsByTagName("nav")[0].classList.remove("fixed");
scroll=0;
}
};
http://m.bbyears.com/css/107426.html
推荐访问: