Edd*_*die 5 html css html5 css3
我已经搜索了一段时间，并尝试了一些方法，但是无法使#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>这里是小提琴。预先感谢您，如果很明显，我们深表歉意。
您需要为粘性元素提供位置，例如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>