Sticky subheader is flikering on scroll

Question

    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>

Basically what I want is the subheader should disappear on scroll down, and appear at scroll to top. But at the very height when subheader starts disappearing, it's hiding because of my one code and again appearing because of my other code, which is making it like infinite loop.

Answer 1

I have slightly edited your code, if I get it right it produces the desired outcome. Concerning the detection of the window's scrolling direction, all the credits go to this 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>