jQueryのコードが遅延して発火されてしまう

Question

こんにちは。

今、webサイトでスクロールしたらヘッダーのデザインが変化する挙動を実現したく、javascriptとjQueryを使っています。
環境としては、gulpとwebpackを連携させて、jqueryとscriptを１つのファイル「main.js」にコンパイルしています。ローカルでしか挙動は見ていませんがheadで読み込んでいるのはmain.jsのみです。

コンパイルされる前のコードは以下の通り

//---------------------------
// 外部jsファイル読み込み
//---------------------------
window.$ = window.jQuery = require('jquery');
require('jquery.color');

//---------------------------
// javascriptコード開始
//---------------------------
//スクロールしたらヘッダー変形
$(function(){
  window.addEventListener('scroll',() => {
    const y = window.scrollY;
    const header = $('.Header');
    const text = $('.Header_nav_li a, .Header_nav_li');
    const logo = $('.Header_title_logo');

    //120以上スクロールしたら発火
    if (y > 120) {
      header.animate({
        'background-color':'#fff'
      });
      text.animate({
        'color':'#333'
      });
      logo.animate({
        'fontSize':'26px',
        'color':'#0c6bb0',
        'margin-top':'0'
      });
    } else{
      header.animate({
        'background-color':'transparent'
      });
      text.animate({
        'color':'#fff'
      });
      logo.animate({
        'fontSize':'33px',
        'color':'#fff',
        'margin-top':'10px'
      });
    }
  });
});

これを踏まえて実際に動きを確認してみると、120以上スクロールしたり、また120以下にスクロールを戻しても、中身の指示が５秒後とか、遅くて１０秒後とかに発火されてしまいます。
なぜこんなに遅いのでしょうか？

上記コードの書き方には自信がなく、書き方に原因があるとは思うのですが...
すみませんが、原因がわかればご教授いただきたいです。アドバイスとかもあれば是非。。。
よろしくお願い申し上げます。

Answer 1

スクロールを検知する度にwindow.addEventListener('scroll',() => { ... });が実行されているため、処理がどんどん溜まり、スクロールを止めた後5秒後、10秒後に発火しているように見えるのではないかと思います。
試しにconsole.log()などでデバッグプリントをすると大量に出力されると思います。

cssで120までのヘッダーと120以降のヘッダーを定義しておいて、jsからはclass,id等を切り替えるだけにしておくと少しは軽くなるかと思います。

Comments

[Yariii]

やはり動作が早そうなので、こちらのクラス切り替えにしました。ご教授ありがとうございました。

Answer 2

htmlのソースと、具体的な挙動の説明があったほうがよいかも

スクロールが止まってから1テンポおいて挙動するという手もあるかも

sample

animate処理なのでuiまで読み込みます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function(){
  var timerId;
  var pos_y=0;
  var pre_y=1;
  var option={
    "header":[
      {"background-color":"#ff0000"},
      {"background-color":"#0000ff"},
      ],
    "text":[
      {"color":"#ffffff"},
      {"color":"#ff0000"},
      ],
    "logo":[
      {"fontSize":"26px","color":"#0c6bb0","margin-top":0},
      {"fontSize":"33px","color":"#ffffff","margin-top":10},
      ],
  };

  $( window).on('scroll',()=>{
    const y = window.scrollY;
    pos_y=(y<120)?0:1;
    clearTimeout(timerId);
    if(pos_y!==pre_y){
      timerId=setTimeout(()=>{
        $('.header').animate(option["header"][pos_y]);
        $('.text').animate(option["text"][pos_y]);
        $('.logo').animate(option["logo"][pos_y]);
        pre_y=pos_y;
      },10);
    }
  }).trigger('scroll');
});
</script>
<div class="header" style="height:9999px">
<br><br><br><br><br>
<span class="text">text</span>
<br><br><br><br><br>
<span class="logo">logo</span>
<br><br><br><br><br>
<span class="text">text</span>
<br><br><br><br><br>
<span class="logo">logo</span>
<br><br><br><br><br>
<span class="text">text</span>
<br><br><br><br><br>
<span class="logo">logo</span>
<br><br><br><br><br>
</div>