javascript - 性能 css 规则与 jQuery .toggleClass

Question

我正在运行一个 wordpress 主题，它有一个粘性标题。我建立了一个子导航，它显示在标题的正下方。每当我使用这个子导航时，标题不应该保持粘性，而子导航应该是粘性的(已经用简单的 javascript addClass 制作)。我只对如何以最佳方式关闭 header 的粘性感兴趣。

(1) 使用 CSS:一种方法是使用 css 并覆盖类，这会使标题变粘。这已经有效，我刚刚将位置固定更改为静态并禁用占位符，这避免了内容中的间隙，当位置设置为固定并且标题从流程中取出时。基于我想在许多页面(约 70%)上使用子导航的情况，我将不得不编写一个大的 css 规则来通过它们的 id 定位相关页面。这导致我认为 javascript 可能会更好地利用资源。

(2) 使用Javascript:我写了一小段 javascript，当子导航的 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

我更倾向于将一个名为 sticky 的类添加到“.header”(假设这是相关区域的根元素)，并将类 header 更改为 header 的 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);