固定位置全高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>