title: The scroll method doesn't work the way I need it to, how to solve?
body: <p>When scrolling down, the class is added and immediately removed, which is seen in this video <a href="https://radikal.ru/video/Ua66Nz79e5D" rel="nofollow noreferrer">https://radikal.ru/video/Ua66Nz79e5D</a> -radikal.</p>
  <p>need to make the script work correctly so that the header is removed, and the block with the player is stretched to the full screen by height 100vh</p>
  <p>html</p>
  <pre><code>&lt;div class=&quot;oneboss&quot;&gt;
      &lt;div class=&quot;header&quot;&gt;HEADER&lt;/div&gt;
      &lt;div class=&quot;main&quot;&gt;
          &lt;div class=&quot;player&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>css</p>
  <pre><code>body {
      width: 100%;
      min-height: 100%;
      overflow-x: hidden;
  }
  
  .oneboss {
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
      position: relative;
  }
  
  .main {
      width: 100%;
      overflow: hidden;
      overflow-y: auto;
      position: relative;
  }
  
  .player {
      //there is nothing
  }
  </code></pre>
  <p>js jq</p>
  <pre><code>const $header = $(&quot;.header&quot;)
  let prevScroll
  let lastShowPos
  
  $('.main').scroll(function() {
    const scrolled = $('.main').scrollTop()
  
    if (scrolled &gt; 0 &amp;&amp; scrolled &gt; prevScroll) {
      $header.addClass(&quot;header_hide&quot;)
      lastShowPos = scrolled
    } else if (scrolled &lt;= Math.max(lastShowPos - 255, 0)) {
      $header.removeClass(&quot;header_hide&quot;)
    }
    prevScroll = scrolled
  });
  </code></pre>
  <p>this class is being added.</p>
  <pre><code>.header_hide {
    display:none;
  }
  </code></pre>
  <p>pls tell me how do solve this?</p>