javascript: スクロールしたときの表示・非表示に関する処理

Question

実現したいこと

現在の位置から少しでも下にスクロールした時は非表示、現在の位置から少しでも上にスクロールした時は表示といった処理を実現したいです。

困っていること
現在の処理では、topの位置から変化があったかどうかで表示・非表示をさせているが、この場合下に行けばいくほどtopに戻ってこない限り表示したいDomが表示されなくて困っています。

  window.addEventListener('DOMContentLoaded', (event) => {
    $(window).on('load scroll', function(){
      if ($(window).scrollTop() > 100) {
        $('#footer').fadeOut(100);
      } else {
        $('#footer').fadeIn(100);
      }
    });
  });

Answer 1

変数に直前の位置を格納しておいて、それと比較すればいいでしょう。
直前の位置より現在位置が大きければ下にスクロール、逆なら上にスクロールと判断できます。

var startPos = 0, winScrollTop = 0;
$(window).on('scroll',function(){
    winScrollTop = $(this).scrollTop();
    if (winScrollTop > startPos) {
        $('#footer').fadeOut(100);
    } else {
        $('#footer').fadeIn(100);
    }
    startPos = winScrollTop;
});

Comments

[nanase21]

ご教示いただきありがとうございます。
解決できました。