性能CSS規則與jQuery .toggleClass

我正在運行一個WordPress主題，它有一個粘性頭。我已經構建了一個subnav，它顯示在標題正下方。每當我使用這個subnav，頭不應該保持粘性，而是subnav應粘（已經與簡單的JavaScript addClass）。我只關心如何關閉標題的粘性最好的方法。性能CSS規則與jQuery .toggleClass

（1）使用CSS：一種方法是使用css並重寫使頭變得粘滯的類。這已經起作用了，我剛剛將位置固定爲靜態並禁用了佔位符，這樣可以避免內容出現空白，當位置設置爲固定並且標頭從流中移出時。基於我想在許多頁面上使用subnav的情況（大約70％），我將不得不寫一個大的css規則來通過它們的id定位相關頁面。這導致我認爲JavaScript可能會更好的資源。

（2）使用Javascript 我寫的JavaScript，容易刪除整個CSS類，小片段時subnav的ID出現在頁面上：

if(document.getElementById('subnavfullwidth')){ 
jQuery('.header-sticky-height').toggleClass('header-sticky-height', 'false'); 
jQuery('.header-wrapper').toggleClass('header-is-sticky', 'false'); 
jQuery('.header').toggleClass('.header-sticky-shadow', 'false'); 
}

簡單作爲標題：對於網站性能來說，JavaScript會更好還是一個大的CSS規則？有沒有一種方法來優化我的JavaScript或只是沒關係？

親切的問候！

來源

2016-05-31 DoUtDes

您可以通過將ID添加到選擇器來對javascript進行optomize。看到這篇文章：http://stackoverflow.com/questions/23518072/improve-inefficient-jquery-selector/23518492#23518492 – terpinmd

嗨terpmind，我必須添加ID的上面的CSS類（.header-sticky-height， .header-wrapper＆.header），還是可以使用另一個元素的id。整個頁面的父元素是#wrap_all。我是否也可以使用它來獲得更好的性能？ - > jQuery（'#wrap_all'）。find（'。header-sticky-height）.toggleClass等等？ – DoUtDes

這裏的表現應該不太相關。 /從可讀性和可維護性的角度來看，我只能通過JS切換/切換_one_類，無論是body還是html元素;我會保留在樣式表中的所有其他東西，使用後代選擇器。 – CBroe

我更傾向於將一個類添加到名爲sticky的'.header'（假設這是相關區域的根元素），並將類頭部更改爲頭部標識。

你寫它的方式，你可以通過在'.header'中添加一個id來獲得一些性能，然後將方法鏈接在一起以限制必須搜索的元素數量。

$('#header') 
    .toggleClass('header-sticky-shadow', false) 
    .find('.header-wrapper') 
     .toggleClass('header-is-sticky', false) 
    .end() 
    .find('.header-sticky-height', false) 
     .toggleClass('header-sticky-height', false);

來源

2016-05-31 21:05:18 dyagmin

嗨dyagmin，你的代碼工作，需要一點時間來測試是否有真正的性能提升或不;） – DoUtDes

性能CSS規則與jQuery .toggleClass

回答

相關問題