Правила производительности css против jQuery .toggleClass

Question

Я запускаю тему wordpress, которая имеет липкий заголовок. Я построил subnav, который отображается прямо под заголовком. Всякий раз, когда я использую этот subnav, заголовок не должен оставаться липким, вместо этого subnav должен быть липким (уже сделанным с помощью простого javascript addClass). Меня интересует только то, как наилучшим образом отключить липкость заголовка.

(1) Использование CSS: Один из способов - использовать css и переопределить классы, которые делают заголовок липким. Это уже работает, я только что изменил позицию, зафиксированную на статике, и отключил местозаполнитель, что позволяет избежать пробела в содержимом, когда позиция установлена ​​на фиксированную, а заголовок выведен из потока. Исходя из того, что я хочу использовать subnav на многих страницах (около 70%), мне пришлось бы написать одно большое правило css для таргетинга на соответствующие страницы своими идентификаторами. Это приводит к моей мысли о том, что javascript может улучшить ресурсы.

(2) Использование Javascript: Я написал небольшой фрагмент JavaScript, который легко удаляет весь CSS-классы, когда идентификатор subnav присутствует на странице:

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 как название: будет ли javascript лучше или одно большое правило css для производительности сайта? Есть ли способ оптимизировать мой javascript, или это нормально?

С уважением!

Answer 1

Я был бы более склонным к тому, чтобы один класс добавился в '.header' (при условии, что это корневой элемент соответствующей области) с именем sticky, и измените заголовок класса на идентификатор заголовка.

Как вы его написали, вы можете получить небольшое представление, добавив id в «.header», а затем объедините методы, чтобы ограничить количество элементов, которые нужно выполнить.

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