title: Sticky subheader is flikering on scroll
body: <pre><code>    Hi please check my code pen, just at the time of hiding the subheader it is flickering. `Please help.
  </code></pre>
  <p><a href="https://codepen.io/dassuvendu/pen/PoWJNxP" rel="nofollow noreferrer">https://codepen.io/dassuvendu/pen/PoWJNxP</a>.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onscroll=()=&gt;{
    const sub=document.querySelector('.subheader');
  
  const off=window.pageYOffset;
    console.log(off)
  if(off&gt;20){
  sub.style.display='none';  
  }
  else{
    sub.style.display='block';
  }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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; */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;header&gt;
      &lt;div class='header'&gt;This is header&lt;/div&gt;
      &lt;div class='subheader'&gt;This is Sub Headerheader&lt;/div&gt;
    &lt;/header&gt;
    &lt;div class='root'&gt;
      &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
       &lt;p&gt;This is para 1&lt;/p&gt;
      &lt;br /&gt;
      &lt;div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>