粘性副标题在滚动时闪烁答案

【问题标题】：Sticky subheader is flikering on scroll粘性副标题在滚动时闪烁
【发布时间】：2021-07-03 03:31:39
【问题描述】：

    Hi please check my code pen, just at the time of hiding the subheader it is flickering. `Please help.

https://codepen.io/dassuvendu/pen/PoWJNxP.

window.onscroll=()=>{
  const sub=document.querySelector('.subheader');

const off=window.pageYOffset;
  console.log(off)
if(off>20){
sub.style.display='none';  
}
else{
  sub.style.display='block';
}
}

.header{
  background:rgba(0,0,0,0.2);
  padding:15px;
  text-align:center;
}
.subheader{
  background:rgba(0,0,0,0.08);
  padding:5px;
  text-align:center;
}
header{
   position: sticky;
    position: -webkit-sticky;
    top: 0;
  background:white;
}
.root{
/*   padding-top:60px; */
}

<div>
  <header>
    <div class='header'>This is header</div>
    <div class='subheader'>This is Sub Headerheader</div>
  </header>
  <div class='root'>
    <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
     <p>This is para 1</p>
    <br />
    <div>
</div>

基本上我想要的是子标题应该在向下滚动时消失，并出现在滚动到顶部。但是在副标题开始消失的最高峰时，它因为我的一个代码而隐藏，又因为我的另一个代码而再次出现，这使得它像无限循环。

【问题讨论】：

标签： javascript jquery css reactjs

【解决方案1】：

我稍微编辑了您的代码，如果我做对了，它会产生预期的结果。关于窗口滚动方向的检测，全部归功于answer

var lastScrollTop = 0;

window.onscroll=()=>{
  const sub=document.querySelector('.subheader');
  var st = window.pageYOffset || document.documentElement.scrollTop;
  
   if (st > lastScrollTop){
     sub.style.display='none';  
   } else {
     sub.style.display='block';
   }

  lastScrollTop = st <= 0 ? 0 : st; 
}

.header{
      background:rgba(0,0,0,0.2);
      padding:15px;
      text-align:center;
    }
    .subheader{
      background:rgba(0,0,0,0.08);
      padding:5px;
      text-align:center;
    }
    header{
       position: sticky;
        position: -webkit-sticky;
        top: 0;
      background:white;
    }
    .root{
    /*   padding-top:60px; */
    }

<div>
      <header>
        <div class='header'>This is header</div>
        <div class='subheader'>This is Sub Headerheader</div>
      </header>
      <div class='root'>
        <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
         <p>This is para 1</p>
        <br />
        <div>
    </div>

【讨论】：