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 Example

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：在body元素上弯曲。这不是一个好主意，请改用div。只需去除身体上的弹性（其他元素都很好），就可以正常工作！

~~显示：flex;~~ ~~flex-direction：列;~~

flex容器无法检测到窗口scrollTop偏移量

2 个答案: