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

因为您使用了fixed到container内所有元素的位置。 在DOM内，此container内实际上没有任何元素，因此您不得不设置min-height

现在，如果我将内容设置为position 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>