PROSAGA码农传奇-html/HTML5-flex容器无法检测窗口scrollTop偏移量

<div class =“post-text”itemprop =“text”>
  
    我个人认为改变显示器的显示类型是一个糟糕的选择
     <code>
 body
 </code>
     元件。它是根容器，谁知道每个浏览器如何指定它的显示。恕我直言，最好创建自己的根元素并从那里开始。
  
  
    <a href="https://codepen.io/erikphilips/pen/QoaGyp?editors=1111" rel="nofollow noreferrer">
      CodePen示例
    </A>
  
  
  
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“false”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
 <code>
 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);
});
 </code>
 </pre>
       <pre class="snippet-code-css lang-css prettyprint-override">
 <code>
 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;
}
 </code>
 </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
 <code>
 <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">
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 This is a large amount of scrollable content.
 </main>

<footer class="sticky-footer">
 I'm sticky
 </footer>
 </div>
 </code>
 </pre>
    </DIV>
  </DIV>
  
  
</DIV>