javascript - 固定位置全高 div 滚动问题

Question

我正在尝试实现一种效果，即我有一个固定位置的全高英雄区域，并在您滚动时向下移动。然后一旦离开屏幕，我希望它下面的内容以正常的滚动流移动。我已经使用 JS 使它有点工作了。但是，除非我为包含的 div 设置固定高度，否则我根本无法滚动。到目前为止，我已经在结果中包含了一个 codepen，但显然我想摆脱明确的固定高度。

.container {
  min-height: 6000px;
}

#overlay {
  background: red;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
}

#content {
  background: blue;
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

https://codepen.io/kylehagler/pen/MPzzKv

Answer 1

因为您对 container 内的所有元素使用了 fixed 位置。在 DOM 内部，这个 container 中实际上没有元素，所以你强制设置了一个 min-height

现在，如果我将内容设置为 static 位置，这是默认位置值。它应该按您的预期工作。

$(window).scroll(function() {
  $('#overlay').css('top', $(this).scrollTop());

  if ($(this).scrollTop() >= $(window).height()) {
    var distance = $(this).scrollTop() - $(window).height();

    $('#content').css('top', -distance);
  } else {
    $('#content').css('top', '0');
  }
});

.container {
  display: block;
  height: 100vh;
}

#overlay {
  background: red;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
}

#content {
  background: blue;
  display: block;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div id="overlay"></div>

  <div id="content">
    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>

    <p>Ut tortor tellus, lacinia a est vitae, aliquet egestas lorem. Suspendisse scelerisque ligula quis auctor lobortis. Vivamus in convallis lectus. Ut euismod a nisi pulvinar molestie. Integer sagittis, mauris in semper suscipit, leo mauris condimentum
      elit, eu dapibus velit massa placerat felis. Nulla fringilla lacus non ipsum suscipit viverra. Suspendisse vitae metus nec enim sagittis porta.</p>
  </div>

</div>