元素闪灼很丑，难处理。

修正 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 class="fixed"></div>
<nav>something...</nav>

别让这个 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;
    }
};

感谢浏览！