性能CSS規則與jQuery .toggleClass

Question

我正在運行一個wordpress主題，該主題具有粘性標題。 我建立了一個子導航，它顯示在標題的正下方。 每當我使用此subnav時，標題都不應保持粘性，而應使subnav保持粘性（已經使用簡單的javascript addClass進行了制作）。 我只想知道如何以最佳方式關閉標頭的粘性。

（1）使用CSS：一種方法是使用css並覆蓋類，這會使標頭變粘。 這已經可行，我只是將位置固定為靜態，並禁用了占位符，當位置設置為固定並且將標題從流程中移出時，可以避免內容出現空白。 基於我要在許多頁面上使用subnav的情況（大約70％），我將不得不編寫一個大的CSS規則，以按其ID定位相關頁面。 這導致我認為javascript可能會更好地利用資源。

（2）使用Javascript：我寫了一個小片段的javascript，當subnav的ID顯示在頁面上時，它很容易刪除整個CSS類：

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還是可以嗎？

親切的問候！

Answer 1

我更傾向於將一個類添加到“ .header”（假設這是相關區域的根元素）中，並將其命名為sticky，並將類頭更改為頭的id。

編寫方式中，可以在'.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);