这个问题在这里已有答案：
我已经搜索了一段时间并尝试了一些东西，但无法得到我的代码的#topDiv滚动页面。我已经尝试将位置设置为position: sticky，但这并没有成功。
这是我的代码：
body {
background-size: cover;
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
}
#topDiv {
height: 50%;
width: 100%;
background: url(https://placehold.it/1000x200);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: sticky;
}
#bottomDiv {
min-height: 50%;
}<body id="background" onresize="VerticalAlign();">
<div id="topDiv">
<img id="icon">
</div>
<div id="bottomDiv">
<div id="textBox">
<h1 id="header" class="check-element">Header</h1>
<h2 id="subheader1" class="moveSub1 check-element">Subheader</h2>
<p id="text1" class="movePara1 check-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec leo quam. Proin vulputate convallis augue ornare faucibus. Etiam odio purus, efficitur at aliquam sed, congue pellentesque nisl. Donec ac ultrices neque, non accumsan ex. Suspendisse varius pharetra quam, vitae dapibus risus. Mauris vel orci mi. Vivamus a purus tempor, consectetur nulla sit amet, fermentum augue.
<br /><br />
Morbi aliquam leo mi, ac viverra neque maximus vel. Fusce non erat feugiat, viverra justo nec, euismod enim. Fusce ut nisi tellus. Vivamus efficitur at eros sed ultrices. Donec eget metus consequat, viverra nibh commodo, imperdiet mauris. Vivamus iaculis mi a nisi imperdiet gravida. Proin semper elementum dignissim. Fusce consectetur eget leo ac fringilla. Morbi mi nisi, feugiat eget pellentesque at, cursus eget ligula. Sed iaculis nunc nisl, eget vestibulum dui tincidunt vitae. Quisque elementum magna sit amet nulla facilisis, in malesuada nibh aliquet. Quisque urna ligula, faucibus eu urna pulvinar, viverra vestibulum dui. Fusce aliquam diam posuere odio tincidunt, quis posuere felis condimentum. Donec sollicitudin rhoncus leo ac ultricies. Sed commodo tempus arcu a dapibus.
<br /><br />
Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.</p>
<br /><br />
Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
<br /><br />
Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
<br /><br />
Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
</div>
</div>
</body>这是在Fiddle。如果很明显，请提前感谢并道歉。
你需要给像top:0;这样的粘性元素赋予位置。这将适用于position：sticky;使用position:fixed;并不好。
body {
background-size: cover;
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
}
#topDiv {
height: 50%;
width: 100%;
background: url(https://placehold.it/1000x200);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: sticky;
top:0;
}
#bottomDiv {
min-height: 50%;
}<body id="background" onresize="VerticalAlign();">
<div id="topDiv">
<img id="icon">
</div>
<div id="bottomDiv">
<div id="textBox">
<h1 id="header" class="check-element">Header</h1>
<h2 id="subheader1" class="moveSub1 check-element">Subheader</h2>
<p id="text1" class="movePara1 check-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec leo quam. Proin vulputate convallis augue ornare faucibus. Etiam odio purus, efficitur at aliquam sed, congue pellentesque nisl. Donec ac ultrices neque, non accumsan ex. Suspendisse varius pharetra quam, vitae dapibus risus. Mauris vel orci mi. Vivamus a purus tempor, consectetur nulla sit amet, fermentum augue.
<br /><br />
Morbi aliquam leo mi, ac viverra neque maximus vel. Fusce non erat feugiat, viverra justo nec, euismod enim. Fusce ut nisi tellus. Vivamus efficitur at eros sed ultrices. Donec eget metus consequat, viverra nibh commodo, imperdiet mauris. Vivamus iaculis mi a nisi imperdiet gravida. Proin semper elementum dignissim. Fusce consectetur eget leo ac fringilla. Morbi mi nisi, feugiat eget pellentesque at, cursus eget ligula. Sed iaculis nunc nisl, eget vestibulum dui tincidunt vitae. Quisque elementum magna sit amet nulla facilisis, in malesuada nibh aliquet. Quisque urna ligula, faucibus eu urna pulvinar, viverra vestibulum dui. Fusce aliquam diam posuere odio tincidunt, quis posuere felis condimentum. Donec sollicitudin rhoncus leo ac ultricies. Sed commodo tempus arcu a dapibus.
<br /><br />
Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.</p>
<br /><br />
Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
<br /><br />
Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
<br /><br />
Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
</div>
</div>
</body>#topDiv：position：fixed;顶部：0;身高：100px;这将使div保持最佳状态。用div包裹你的#topDiv：position：relative;身高：100px;这将保留topDiv的空间，以便内容从此包装器下面开始。
body {
background-size: cover;
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
}
.top-container {
position: relative;
height: 100px;
}
#topDiv {
height: 100px;
width: 100%;
background: url(https://placehold.it/1000x200);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: fixed;
top: 0
}
#bottomDiv {
min-height: 50%;
}<body id="background" onresize="VerticalAlign();">
<div class="top-container">
<div id="topDiv">
<img id="icon">
</div>
</div>
<div id="bottomDiv">
<div id="textBox">
<h1 id="header" class="check-element">Header</h1>
<h2 id="subheader1" class="moveSub1 check-element">Subheader</h2>
<p id="text1" class="movePara1 check-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec leo quam. Proin vulputate convallis augue ornare faucibus. Etiam odio purus, efficitur at aliquam sed, congue pellentesque nisl. Donec ac ultrices neque, non accumsan ex. Suspendisse varius pharetra quam, vitae dapibus risus. Mauris vel orci mi. Vivamus a purus tempor, consectetur nulla sit amet, fermentum augue.
<br /><br />
Morbi aliquam leo mi, ac viverra neque maximus vel. Fusce non erat feugiat, viverra justo nec, euismod enim. Fusce ut nisi tellus. Vivamus efficitur at eros sed ultrices. Donec eget metus consequat, viverra nibh commodo, imperdiet mauris. Vivamus iaculis mi a nisi imperdiet gravida. Proin semper elementum dignissim. Fusce consectetur eget leo ac fringilla. Morbi mi nisi, feugiat eget pellentesque at, cursus eget ligula. Sed iaculis nunc nisl, eget vestibulum dui tincidunt vitae. Quisque elementum magna sit amet nulla facilisis, in malesuada nibh aliquet. Quisque urna ligula, faucibus eu urna pulvinar, viverra vestibulum dui. Fusce aliquam diam posuere odio tincidunt, quis posuere felis condimentum. Donec sollicitudin rhoncus leo ac ultricies. Sed commodo tempus arcu a dapibus.
<br /><br />
Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.</p>
<br /><br />
Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
<br /><br />
Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
<br /><br />
Integer gravida egestas dui in feugiat. Nam a odio eros. Donec finibus porta urna, ut finibus orci egestas sed. Pellentesque id ligula dignissim, pharetra quam in, dapibus urna. Fusce scelerisque bibendum metus sed pharetra. Vivamus bibendum quis nisl ut pellentesque. Duis quis augue in metus dapibus porttitor. Nulla aliquam gravida mi sed accumsan. Maecenas sodales leo a velit tincidunt ultricies. Sed sed ante eget nulla consequat viverra. Aliquam vitae nunc nec sem consectetur vulputate. Sed scelerisque in urna non fermentum. Mauris tincidunt eleifend erat, id laoreet erat condimentum at. Donec rutrum est ut augue maximus, non fringilla ligula eleifend. Suspendisse semper, sem et tincidunt interdum, massa neque fermentum odio, laoreet malesuada magna neque ac diam.
</div>
</div>
</body>