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>

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

Answer 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>

粘性子标题在滚动上闪烁

1 个答案: