資訊專欄INFORMATION COLUMN
摘要：采用不可見元素減少變更產(chǎn)生的運算臨時說法的原因是當(dāng)數(shù)量再次增加，達到又一新高度后，閃爍問題再現(xiàn)。至此，全面解決動態(tài)添加樣式導(dǎo)致的元素閃爍。原生進一步加快速度避免閃爍是個好東西。
元素閃爍很丑，難解決。
修改 Class 而不是 Style我在不久前做過一個導(dǎo)航欄，要求其滾動到屏幕頂端后固定。很常見。開始的時候沒問題，很快就可以搞定。
nav {
position: absolute;
top: 60px;
}
var scroll=0;
var nav=$("nav");
var navST=60; //該元素距離網(wǎng)頁頂端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;
}
});
運行很流暢。
做好，我自然就忙著網(wǎng)頁內(nèi)容去了。沒曾想，隨著頁面 JS 的不斷增加，導(dǎo)航欄在固定時出現(xiàn)了可怕的閃動。
唔，就是 一下看得見 一下看不見 的東西！
應(yīng)該有不少人和我一樣。百度，無果。谷歌，看不懂，翻譯也不行。
不知道真相的我，眼淚 流下來。
哦！一道莫名的亮光從我的眼前閃過！這道亮光里，有希望，，有興奮，，組成了四個大字：
元素重繪
就在這千萬分之一秒，億萬分之一秒 里，我理解了：
nav.css({position: "fixed",top: "0"});
這一句 JS 產(chǎn)生了兩次 DOM 寫入，影響瀏覽器渲染頁面兩次。
使用 $.addClass 語句可以解決。
nav {
position: absolute;
top: 60px;
}
.fixed {
position: fixed;
top: 0;
}
var scroll=0;
var nav=$("nav");
var navST=60; //該元素距離網(wǎng)頁頂端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 變更產(chǎn)生的運算“臨時” 說法的原因是當(dāng) JS 數(shù)量再次增加，達到又一新高度后，閃爍問題再現(xiàn)。
原因大概是 $.addClass 時瀏覽器需要重新計算該元素位置， JS 數(shù)量過多使計算過程明顯。
不多說，在 HTML 里多放一個包含 .fixed 的寬高為 0 的元素即可解決。
別讓這個 div.fixed 顯示出來。
至此，全面解決 “動態(tài)添加樣式導(dǎo)致的元素閃爍” 。
原生 JS 進一步加快速度避免閃爍jQuery 是個好東西。原生 JS 更是個好東西。
有些 jQuery 代碼，被轉(zhuǎn)化為好多條原生 JS 才實現(xiàn)效果。
然而其實只需要一條。
將 jQuery 代碼轉(zhuǎn)化為原生 JS 是個加快速度，避免閃爍的不二選擇。
var scroll=0;
var navST=60; //該元素距離網(wǎng)頁頂端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;
}
};
謝謝閱讀！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111424.html
摘要：采用不可見元素減少變更產(chǎn)生的運算臨時說法的原因是當(dāng)數(shù)量再次增加，達到又一新高度后，閃爍問題再現(xiàn)。至此，全面解決動態(tài)添加樣式導(dǎo)致的元素閃爍。原生進一步加快速度避免閃爍是個好東西。 元素閃爍很丑，難解決。 修改 Class 而不是 Style 我在不久前做過一個導(dǎo)航欄，要求其滾動到屏幕頂端后固定。很常見。開始的時候沒問題，很快就可以搞定。 nav { position: absol...
摘要：無論是否移動，元素仍然占據(jù)原來的空間。絕對定位絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。 為啥讀這本書 現(xiàn)在前端圈子過于浮躁，掌握基礎(chǔ)無疑比掌握一個js框架重要 css怎么都能寫出來，但是要寫的好寫得快還得多讀書 css魔法推薦的，讀完這個讀讀css揭秘 當(dāng)然，根本原因還是覺得自己掌握不好 開始總結(jié)吧~ 一. 基礎(chǔ)知識 經(jīng)過上世紀沒有 css的痛苦時的混沌時期，人們開始了進...
摘要：事件只針對輸入框值的真實修改，而不是通過來修改。指令將給定表達式的值替換元素的內(nèi)容。指令還有另外一種轉(zhuǎn)換方式，如果你有字符串?dāng)?shù)組希望在輸入框中顯示，你可以在上使用指令。 指令 Directive 指令系統(tǒng)（Directive）是Angular應(yīng)用的一個重要特性。 是通過對DOM元素的標簽丶屬性來增強HTML表現(xiàn)力，為其增加一些特定功能。本篇參考文檔Angular菜鳥教程 內(nèi)置指令 這里...
閱讀 663·2021-09-24 09:48
閱讀 2499·2021-08-26 14:14
閱讀 526·2019-08-30 13:08
閱讀 1455·2019-08-29 15:22
閱讀 3087·2019-08-29 11:06
閱讀 1013·2019-08-26 18:26
閱讀 1070·2019-08-26 13:53
閱讀 2546·2019-08-26 12:21
