When scrolling down, the class is added and immediately removed, which is seen in this video https://radikal.ru/video/Ua66Nz79e5D -radikal.

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

html

<div class="oneboss">
    <div class="header">HEADER</div>
    <div class="main">
        <div class="player"></div>
    </div>
</div>

css

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
}

js jq

const $header = $(".header")
let prevScroll
let lastShowPos

$('.main').scroll(function() {
  const scrolled = $('.main').scrollTop()

  if (scrolled > 0 && scrolled > prevScroll) {
    $header.addClass("header_hide")
    lastShowPos = scrolled
  } else if (scrolled <= Math.max(lastShowPos - 255, 0)) {
    $header.removeClass("header_hide")
  }
  prevScroll = scrolled
});

this class is being added.

.header_hide {
  display:none;
}

pls tell me how do solve this?