我试图实现一种效果，即我拥有固定位置的全高英雄区域，并在滚动时向下移动。然后，一旦离开屏幕，我希望它下面的内容在正常的滚动流中移动。我已经使用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;
}
答案 0 :(得分：0)
因为您对fixed内部的所有元素都使用了位置container。在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>