0

При прокрутке вниз класс добавляется и сразу же удаляется что видно на этом видео -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 убирает элемент из потока). как-то так.

1 ответ 1

1

В вашем коде не работает scroll из-за того, что прокрутка производится в контейнере. В этом случае контейнером считается document. Поменяйте прослушивание скролла .main на document и код заработает.

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

$(document).scroll(function() {
  const scrolled = $(this).scrollTop()
  console.log(scrolled)

  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 {
  visibility: hidden;
}
<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>

5
  • я это и так делаю (у себя в коде) проблема в поведении. когда я кручу скролл вниз, то класс .header_hide добавляется и тут же убирается, мне же нужно чтобы класс к которому лепится .header_hide добавлялся (когда я опускаю скролл вниз), а потом убирался (когда я поднимаю скролл вниз). при добавлении .header_hide к .header, последний должен скрыться и плеер должен растянутся на всю высоту посредством height 100vh, но происходят эти рывки (их же видно на видео. рывки от того, что класс добавляется и тут же убирается. проблема в том, что display none убирает элемент из потока). как-то так.
    – dJoni .D
    Commented 15 янв. 2022 в 20:55
  • @dJoni.D, так и будет происходить т.к. после скрытия верхней строки размер контейнера меняется. Как вариант — скрывать .header через visibility: hidden. Внёс эту правку в ответ.
    – 7-zete-7
    Commented 18 янв. 2022 в 8:42
  • такой вариант не подходит. он оставляет блок в потоке, а мне нужно убрать элемент из потока. я же написал, что нужно растянуть плеер на всю высоту окна браузера. пока .header в потоке он будет мешать блоку ниже. я описал действие с display none. при попытке это сделать появляется проблем как раз связанная с размером контейнера с блоком видео
    – dJoni .D
    Commented 19 янв. 2022 в 10:26
  • @dJoni.D, если оставаться на логике с позицией вертикального скролла, то можно оставить visibility: hidden, к контейнеру добавить overflow-y: hidden и фиксировать скролл в позиции равной позиции плеера. Для более изящного решения этого вопроса необходимо будет использовать немного другие логики срабатывания
    – 7-zete-7
    Commented 20 янв. 2022 в 6:29
  • нужно поиграть с высотой тогда уж. Получаю высоту блока с видео и указываю её родительскому блоку и далее блоку с видео устанавливаю класс с: position: fixed; width:100vw; heighth:100vh; только не пойму, как это в коде реализовать
    – dJoni .D
    Commented 20 янв. 2022 в 10:15

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.