При прокрутке вниз класс добавляется и сразу же удаляется что видно на этом видео -radikal.
нужно заставить работать скрипт правильно, чтобы убирался header, а блок с плеером растягивался на весь экран посредством height 100vh
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
});
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*/
}
.header_hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="oneboss">
<div class="header">HEADER</div>
<div class="main">
<div class="player"></div>
</div>
</div>
есть варианты решения проблемы?
UPD. 16-01-2022 11-07 Поясняющее дополнение к вопросу
я это и так делаю (у себя в коде) проблема в поведении. когда я кручу скролл вниз, то класс .header_hide добавляется и тут же убирается, мне же нужно чтобы класс к которому лепится .header_hide добавлялся (когда я опускаю скролл вниз), а потом убирался (когда я поднимаю скролл вниз). при добавлении .header_hide к .header, последний должен скрыться и плеер должен растянутся на всю высоту посредством height 100vh, но происходят эти рывки (их же видно на видео. рывки от того, что класс добавляется и тут же убирается. проблема в том, что display none убирает элемент из потока). как-то так.