javascript - 在滚动时隐藏标题，但是当您到达底部并向上滚动时，标题会显示

Question

我不完全确定如何提出这个问题，所以我不确定这个问题是否已经存在..

我有一个标题，在你像这样向下滚动后会隐藏......

 let prevScrollpos = window.pageYOffset;
 window.onscroll = function() {
    let currentScrollpos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        const header = document.getElementById('app-program-header');
        header.style.top = '0';
    } else {
        const header = document.getElementById('app-program-header');
        header.style.top = '-50px';
  }
  prevScrollpos = currentScrollpos;
};

<div style="height: 50px; width: 100%; background-color: black; position: absolute;" id="app-program-header">
</div>
<div style="height: 150vh; background: pink; width: 100%;" class="body">
</div>

但我想要发生的是，如果您到达页面底部然后向上滚动，我希望页眉返回。我不完全确定我如何能够做这样的事情

编辑

由于移动设备的滚动方式，我需要能够将向上滚动的偏移量更改为 10、20 像素，这样标题不会在您向上滚动时立即返回

任何帮助将不胜感激

Answer 1

我添加了 var direction判断上下滚动，

并让 <div id="app-program-header">是position=fixed .

然后使用 style.display确定是否显示标题而不是 style.top .

var prevScrollpos = 0;
var maxScrollpos = 0;
window.onscroll = function() {
  let currentScrollpos = window.pageYOffset;
  let direction = currentScrollpos - prevScrollpos;
  let header = document.getElementById('app-program-header');
  if(direction<0 && (maxScrollpos - currentScrollpos) > 50){ //if minus, scroll up
    header.style.top = '5px';
    header.style.display = 'block';
  }
  else{
    maxScrollpos = currentScrollpos > maxScrollpos ? currentScrollpos : maxScrollpos
    if (prevScrollpos < 50) {
        header.style.display = 'block';
        maxScrollpos = 0;
    } else {
        header.style.display = 'none';
    }
  }
  prevScrollpos = currentScrollpos;
};

<div id="app-program-header" style="top:5px;height:20px;display:block;background-color:green;position:fixed;">
header
</div>
<div style="height:800px;margin-top:40px;">
body
</div>