性能CSS规则与jQuery .toggleClass

Question

I'm running a wordpress theme, which has a sticky header. I've built a subnav, which is displayed right below the header. Whenever I use this subnav, the header should not stay sticky, instead the subnav should be sticky (already made with simple javascript addClass). I am only interested how to turn off the stickiness of the header the best way.

(1) Using CSS: One way is to use css and to override the classes, which make the header sticky. This already works, I've just changed the position fixed to static and disabled the placeholder, which avoids a gap in the content, when the position is set to fixed and the header is taken out of the flow. Based on the circumstance that I want to use the subnav on many pages (ca. 70%) I would have to write one big css rule for targeting the relevant pages by their ids. This leads to my thought that javascript may better on resources.

(2) Using Javascript: I've wrote a small snippet of javascript, which easily removes the whole css-classes, when the ID of the subnav is present on the page:

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' );
}

Simple as the title: Would the javascript be better or one big css-rule for the site performance? Is there a way to optimize my javascript or is it just okay?

Kind Regards!

Answer 1

I'd be more inclined to have one class added to '.header' (assuming that's the root element of the relevant area) named sticky, and change the class header to an id of header.

The way you have it written, you could gain a little performance by adding an id to '.header', and then chain methods together to limit the number of elements to have to search through.

$('#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);