質問: jQuery(window).outerWidth() * 0.1; jQuery(window).on('scroll', function() { if (jQuery(window).scrollTop() > headerH + overplus) { // ヘッダーfixed時 $header.css({ 'transition': 'transform .5s' }); $header.addClass('standby').addClass('fixed'); } else if (jQuery(window).scrollTop() > headerH) { // ヘッダーstandby時 if ($header.hasClass('standby')) { $header.css({ 'transition': 'transform .5s' }); } else { $header.css({ 'transition': '' }); } $header.addClass('standby').removeClass('fixed'); } else { // ヘッダーabsolute時 $header.css({ 'transition': '' }); $header.removeClass('standby fixed'); } }); ``` 上記コードで問題なくヘッダーは動作するのですが、 クリックでスライドするパーツとの兼ね合いで どうしても #header に transition: transform .5s; を付与したいのです。 ですが、それをするとヘッダーの動きにカクつきが出てしまいます。 ヘッダーがカクつくのは ``` else if (jQuery(window).scrollTop() > headerH) { // ヘッダーstandby時 if ($header.hasClass('standby')) { $header.css({ 'transition': 'transform .5s' }); } else { $header.css({ 'transition': '' }); } $header.addClass('standby').removeClass('fixed'); } ``` の部分なので、この部分をどうにかしたら #header に transition: transform .5s; を付与したまま ヘッダーの動きを正常にできるのかな・・・と考えているのですが、 このコードの意味をきちんと理解していないためどこを触っても挙動がおかしくなってしまいます。 1:ページロード時はclassの付与・transition無し 2:ヘッダーの高さよりスクロールすると .standby を持っていれば transition を付与 .standby を持ってなければ transition を消す それに関わらず.standbyを付与、.fixedを消す 3:さらにスクロールすると .standby .fixed transitionも付与 というところまでは理解しました(合っているが自信がありませんが・・・)。 前置きが長くなりましたが、 transitionをこんなにこまかく付け外しするのは何故でしょうか。 ``` else { $header.css({ 'transition': '' }); } ``` の部分を削除してもヘッダーはちゃんとスライドダウンしますが、#header に transition を付けると やはりカクついてしまいます。 上記jQueryのコードでやっていることの意味を教えていただけませんでしょうか。 よろしくお願いいたします。
回答: 意味を教えるという言葉が漠然としているので正確に誰も教えることはできません。 全ての行にコメント付きで解説を求める等、手取り足取り教えてほしいという意味でしたら、かなりの労力を回答者にかけようとしていることを理解してください。 コードの意味をきちんと理解していないのであれば、まず、理解する為にリファレンスを読んでそこでわからない箇所を質問してください。 これはアドバイスであって回答ではないかもしれませんが、下記のようにコードの要所に出てくる変数等をわかりやすく視覚化するのはコードを理解するのに役立つことです。(console.logなども調べてください。) codepen