Как правильно отследить скролл вверх и вниз?

Question

При прокрутке в низ должна скрываться верхняя часть, нижняя занимает ее место, прокрутка может исчезнуть и получается что прокрутка у блока равна 0. Нужно при прокрутке в низ скрывать верхнюю часть, когда листаем вверх должна показаться половина верхнего блока и если пролистали до самого верха показаться полностью верхняя часть

Проблема заключается в том, что блок с прокруткой занимает место шапки и скролл может исчезнуть

let scrollPos = 0;
$(".block__list").scroll(function() {
  let st = $(this).scrollTop();
  let blockScroll = $(this).scrollTop();
  let headHeight = $('.block__head').innerHeight();
  let bHeight = $('.block__head-bottom').innerHeight();
  let tHeight = $('.block__head-top').innerHeight();

  if (st > scrollPos) {
    $('.block__head').css({
      "transform": `translateY(-${headHeight}px)`
    });
    $('.block__body').css('margin-top', -headHeight);

  } else if (st < scrollPos && st != 0) {
    $('.block__head').css({
      "transform": `translateY(-${tHeight}px)`
    }).addClass('hidden-top');
    $('.block__body').css('margin-top', -tHeight);
  } else if (st == 0) {
    $('.block__head').css({
      "transform": `translateY(0px)`
    });
    $('.block__body').css('margin-top', 0);
  }
  scrollPos = st;
});

.block {
  width: 350px;
}

.block__head {
  transition: all 200ms;
}

.block__head-top {
  height: 50px;
  background: red;
}

.block__head-bottom {
  height: 50px;
  background: blue;
}

.block_body {
  transition: all 200ms;
}

.block__list {
  overflow: auto;
  max-height: 200px;
}

.block__item {
  padding: 20px;
  text-align: center;
  margin-bottom: 10px;
  background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <div class="block__head">
    <div class="block__head-top"></div>
    <div class="block__head-bottom"></div>
  </div>
  <div class="block__body">
    <div class="block__list">
      <div class="block__item">title</div>
      <div class="block__item">title</div>
      <div class="block__item">title</div>
      <div class="block__item">title</div>
      <div class="block__item">title</div>
      <div class="block__item">title</div>
      <div class="block__item">title</div>
      <div class="block__item">title</div>
      <div class="block__item">title</div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как правильно отследить скролл вверх и вниз?

Ответы (0 шт):