гибкий контейнер не может определить смещение окна scrollTop

Question

Мне нужно получить значение window.pageYOffset || document.documentElement.scrollTop;.Определить1) если пользователь прокрутил заголовок2) и направление st < delta && lastScrollTop !== 0

$(window).on('scroll', fn) не сработало, поэтому я использовал $('main').on('scroll', fn).Это потому, что я использую

body {
  display: flex;
  flex-direction: column;
}

Но теперь я не могу отодвинуть прокрутку.Есть идеи? codepen ниже

var lastScrollTop = 0;
var delta = 5;


$(window).on('scroll', () => {
     var st = window.pageYOffset || document.documentElement.scrollTop;
     console.log('not triggering', st);
});

$('main').on('scroll', () => {
    var st = window.pageYOffset || document.documentElement.scrollTop;
    console.log('is triggering', st);
});

Я использую это решение - https://codepen.io/elna-legzdia/pen/YgYqoW

Answer 1

Лично я считаю, что выбор типа отображения элемента body плохой выбор.Это корневой контейнер, и кто знает, как каждый браузер указал его отображение.ИМХО, лучше создать свой собственный корневой элемент и начать с него.

Пример CodePen

var $main = $('main');
$main.on('scroll', () => {
  var pos = $main.scrollTop();
  var isTop = pos == 0;
  $main.toggleClass('top', isTop);
  var isBottom = pos + $main.innerHeight() >= $main.prop('scrollHeight');
  $main.toggleClass('bottom', isBottom);
  console.log('is triggering', pos);
});

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

#root {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.sticky-header, .sticky-footer {
  flex: 0 0 auto;
  background: purple;
}

.sticky-content {
  flex: 1 1 auto;
  overflow-y: scroll;
  background-color: green;
}
.top {
  background-color: yellow;
}
.bottom {
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
    <header class="sticky-header">
      <h1>I'm Sticky</h1>
    </header>

    <main class="sticky-content top">
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
    </main>

    <footer class="sticky-footer">
      <small>I'm sticky</small>
    </footer>
  </div>

Answer 2

Вы используете dispay: flex на элементе тела. Это не очень хорошая идея, вместо этого используйте div. Просто снимите изгиб на теле (остальные элементы хороши) и у вас все получится!

дисплей: гибкий; flex-direction: column;