性能 css 规则与 jQuery .toggleClass答案

【问题标题】：Performance css rules vs. jQuery .toggleClass性能 css 规则与 jQuery .toggleClass
【发布时间】：2016-05-31 20:07:56
【问题描述】：

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

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

(2) 使用 Javascript：我写了一个小的 javascript sn-p，当页面上存在 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 或者就可以了？

亲切的问候！

【问题讨论】：

您可以通过将 id 添加到您的选择器来优化 javascript。看到这个帖子：stackoverflow.com/questions/23518072/…
嗨，terpmind，我是否必须将 ID 添加到上面的 css 类（.header-sticky-height、.header-wrapper 和 .header），或者是否也可以使用另一个的 id元素。整个页面的父元素是#wrap_all。我也可以使用它来获得更好的性能吗？ -> jQuery ('#wrap_all').find('.header-sticky-height).toggleClass 等等？
性能在这里应该是无关紧要的。 / 从可读性和可维护性的角度来看，我将在这里通过 JS 仅切换/切换 one 类，用于 body 或 html 元素；使用后代选择器，我将保留在样式表中的所有其他内容。
谢谢，是的，我也有这个想法。只是想从一些专业人士那里得到关于性能的答案:)

标签： javascript jquery css wordpress

【解决方案1】：

我更倾向于将一个名为sticky的类添加到'.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);

【讨论】：

您好 dyagmin，您的代码有效，需要一点时间来测试是否有真正的性能提升；)