0
私はスティッキーヘッダーを持つワードプレステーマを実行しています。私はヘッダのすぐ下に表示されているサブナビを構築しました。このサブナブを使用するときはいつも、ヘッダーは粘着性を持つべきではありません。サブナビはスティッキーでなければなりません（すでに単純なjavascript addClassで作られています）。私はヘッダーのスティッキーさを最善の方法で止める方法だけに興味があります。パフォーマンスのCSSルールとjQueryの比較.toggleClass
（1）CSSの使用： 1つの方法は、CSSを使用して、クラスをオーバーライドしてヘッダーを固定することです。これは既に動作していますが、位置を固定に変更し、プレースホルダを無効にしました。位置が固定に設定され、ヘッダーがフローから取り除かれると、コンテンツのギャップが回避されます。多くのページ（約70％）でサブナビを使用したいという状況に基づいて、関連するページをIDでターゲティングするための1つの大きなCSSルールを作成する必要があります。これは、javascriptがリソース上でより良いかもしれないという私の考えにつながります。
（2）JavaScriptを使用：
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');
}
シンプル： を私はsubnavのIDがページ上に存在するときに容易、全体CSS-クラスを削除するJavaScriptの小さなスニペットを、書いてきましたタイトルとして：javascriptは良いか、サイトのパフォーマンスのための大きなCSSルールですか？私のjavascriptを最適化する方法はありますか、それはちょうど大丈夫ですか？
親切！
あなたのセレクタにIDを追加することで、JavaScriptを最適化することができます。この投稿を見る：http://stackoverflow.com/questions/23518072/improve-inefficient-jquery-selector/23518492#23518492 – terpinmd
こんにちはterpmind、上記のCSSクラスにIDを追加する必要がありますか（.header-sticky-height、 .header-wrapperと.header）、別の要素のidを使用することもできます。ページ全体の親要素は#wrap_allです。私はこれをより良いパフォーマンスのために使うこともできますか？ - > jQuery（ '#wrap_all'）。find（ '。header-sticky-height）.toggleClassなどですか？ – DoUtDes
パフォーマンスはここでは無関係です。 /可読性と保守性の観点から、私はbody要素かhtml要素のどちらかでJSを介して_one_ classだけを切り替え/トグルします。子孫セレクタを使用して、スタイルシートに残したいものはすべて選択します。 – CBroe