jQueryで上から降りてくるヘッダーメニューの、コードの意味を教えてください。

Question

お世話になっております。

jQueryでclassをつけはずしすることによって上からするっと降りてくるヘッダーについて、質問させてください。

codepen

コードは以下のようになっています。

 <header id="header" class="js-float-header">
      ヘッダー  
</header><!-- /header -->
<main>
  <section class="section section1"></section>
  <section class="section section2"></section>
  <section class="section section3"></section>
</main>

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

#header {
  background: pink;
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  transition: none;
  z-index: 100;
  background: pink;
/*   この↓transitionを付けたいけど付けるとカクつく */
/*   transition: transform .5s; */
}
#header.standby {
  position: fixed;
  transform: translateY(-100%);
}

#header.fixed {
  transform: translateY( 0 );
	box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.07);
}

.section {
  height: 400px;
}
.section1 {
  background: #ccc;
}
.section2 {
  background: #ddd;
}
.section3 {
  background: #fff;
}

  // ヘッダー固定切り替え
var $header = jQuery('.js-float-header');
  //外部の高さをとる
var headerH = $header.outerHeight();
  //ブラウザウィンドウの外側の幅
var overplus = 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; を付与したまま
ヘッダーの動きを正常にできるのかな・・・と考えているのですが、

このコードの意味をきちんと理解していないためどこを触っても挙動がおかしくなってしまいます。

１：ページロード時はclassの付与・transition無し

２：ヘッダーの高さよりスクロールすると
.standby を持っていれば transition を付与
.standby を持ってなければ transition を消す
それに関わらず.standbyを付与、.fixedを消す

３：さらにスクロールすると
.standby .fixed　transitionも付与

というところまでは理解しました（合っているが自信がありませんが・・・）。

前置きが長くなりましたが、
transitionをこんなにこまかく付け外しするのは何故でしょうか。

else {
   $header.css({ 'transition': '' });
  }

の部分を削除してもヘッダーはちゃんとスライドダウンしますが、#header に transition を付けると
やはりカクついてしまいます。

上記jQueryのコードでやっていることの意味を教えていただけませんでしょうか。

よろしくお願いいたします。

Answer 1

意味を教えるという言葉が漠然としているので正確に誰も教えることはできません。
全ての行にコメント付きで解説を求める等、手取り足取り教えてほしいという意味でしたら、かなりの労力を回答者にかけようとしていることを理解してください。
コードの意味をきちんと理解していないのであれば、まず、理解する為にリファレンスを読んでそこでわからない箇所を質問してください。

これはアドバイスであって回答ではないかもしれませんが、下記のようにコードの要所に出てくる変数等をわかりやすく視覚化するのはコードを理解するのに役立つことです。(console.logなども調べてください。)
codepen

Comments

[uni..]

色々アドバイスいただき、ありがとうございます。
codepenのモニターの数値を拝見して、自分がコードの内容で勘違いしている点を発見することができました。

質問をだらだらと長く書いてしまったのですが、

// ヘッダーstandby時
if ($header.hasClass('standby')) {
$header.css({ 'transition': 'transform .5s' });
} else {
$header.css({ 'transition': '' });
}
$header.addClass('standby').removeClass('fixed');
}

の部分で、短いstandbyの間にtransitionを付け外しする意味はなんなのかという
ものでした。

漠然と、慣れてる方が見れば当たり前な記述なのかな？と思って質問してしまい、
回答者の方に不要な労力をかける意図はありません。

ですがそういうご指摘をいただいても仕方ない質問だなーと改めて読み返してみて、感じました^^;
いただいたアドバイスに従おうと思います。
コメントありがとうございました！