実現したいこと

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

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

js
1  window.addEventListener('DOMContentLoaded', (event) => {
2    $(window).on('load scroll', function(){
3      if ($(window).scrollTop() > 100) {
4        $('#footer').fadeOut(100);
5      } else {
6        $('#footer').fadeIn(100);
7      }
8    });
9  });

行動規範の内容に同意します

回答1件

ベストアンサー

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

js
1var startPos = 0, winScrollTop = 0;
2$(window).on('scroll',function(){
3    winScrollTop = $(this).scrollTop();
4    if (winScrollTop > startPos) {
5        $('#footer').fadeOut(100);
6    } else {
7        $('#footer').fadeIn(100);
8    }
9    startPos = winScrollTop;
10});