javascript: スクロール時に特定の要素を非表示にしたい

Question

実現したいこと

下に10pxスクロールされた時にフッターを非表示にし、上に10pxスクロールされたら表示されるようにしたい

  let element = document.getElementById("footer");
  let startHeight = 0,currentHeight = 0;
  window.addEventListener( "scroll", function () {
    winScrollTop = $(this).scrollTop();
    if (currentHeight > startHeight) {
      element.style.display ="none";
    }else{
      element.style.display ="block";
    }
  });

困っていること
下にスクロール時には、非表示に出来るのすが、上にスクロールの場合だとトップに来るまで表示されなくて困っています。

Comments

[Yousuck]

ご提示のものだと、"startHeight" "currentHeight" 共に "0"のままなので
ずっと "else"を通ります。
あと、"winScrollTop" がセットされていますがどちらで使いますか？
一部抜粋したものではなく、ソースは可能な限りご提示頂いた方が早く解決すると思いますよ。

Answer 1

おそらくなのですが、startHeightがアクセス時のHeightを取得して、それ以降代入を行わないからではないでしょうか？

なのでアクセス時は

startHeight = 0
currentHeight = 0

となり、スクロールすればcurrentHeightが変動し、if分のtrueが通ってフッターが非表示になります。

しかしstartHeightは0のままなのでページトップにスクロールしたときのみ、
currentHeightが0となりif分のfalseが通るものと思われます。