javascriptでスクロールポイントを取得して複数アニメーションをかけたい。

Question

現在、javascriptとcssを使って要素をフェードさせる練習をしているのですが、下記の処理だとなぜか思ったように動いてくれません。

//状況
1.グローバルにフェードを始める基準値をおいた
2.ヘッダーが#heroの高さより下に行ったらフェードインし、上にいったらフェードアウトするように指定した←発火しない、エラーログもはかない
3.#heroの高さより下に行ったら#worksがフェードするように指定した。←正常に動く

最終的には２、３が両方とも正常に動くように処理をしたいのですが、
原因がなんなのか見当がつかなくなってしまったのでご教授お願いします。

const heroController = document.querySelector("#hero").clientHeight; //#heroの高さを取得

function fadeInOut() {
  const header = document.querySelector("#header"); //#header取得
  window.onscroll = function() {
    //onscrollEvent
    const scrollPotision = window.pageYOffset; //windowのスクロール量を取得
    if (scrollPotision > heroController) {
      header.classList.add("fadeInHeader");
      header.classList.remove("fadeOutHeader");
    } else if (scrollPotision < heroController) {
      header.classList.add("fadeOutHeader");
      header.classList.remove("fadeInHeader");
    }
  };
}
fadeInOut();

function slidePoint() {
  const move = document.querySelector("#works"); //#works取得
  window.onscroll = function() {
    //onscrollEvent
    const scrollPotision = window.pageYOffset; //windowのスクロール量を取得
    if (scrollPotision > heroController) {
      move.classList.add("fadeIn01");
    }
  };
}
slidePoint();

Answer 1

onscrollを上書きする場合はあとが優先

<script>
window.onscroll=function() {
  console.log(1);
};
window.onscroll=function() {
  console.log(2);
};
</script>
<div style="height:9999px"></div>

addEventListenerを利用すれば両方生きます

<script>
window.addEventListener('scroll',function() {
  console.log(1);
});
window.addEventListener('scroll',function() {
  console.log(2);
});
</script>
<div style="height:9999px"></div>

Comments

[hsd]

回答いただきありがとうございます。
実行したところ2つとも正常に動作しました。
しかし、なぜaddEventListenerがあるとないとでは処理が変わってしまうのでしょうか。

[yambejp]

onloadで書くと「上書き」
addEventListenerは「追加」

[hsd]

わかりやすい回答ありがとうございました。
これから意識してコードを書いてみます。

Answer 2

onscrollが2回代入されているので、上書きされているだけではないでしょうか？
処理を纏めてみてください。
もしどうしても現在のように別々に定義したい場合は、onscrollに代入ではなく配列に追加していき、onscrollではその配列に入っている関数を全て実行するようにするという手もあります。

Comments

[hsd]

回答していただいてありがとうございます。
確かに、順番を入れ替えると下にある処理だけが動作するので上書きされているというのは理解できました。
処理を１つにまとめたら両方の処理が走りました。ありがとうございました。