Menu
I have been searching for a while and tried a few things but can't get the #topDiv of my code to scroll with the page. I have tried setting the position to position: sticky but this hasn't done the trick.
Here is my code:
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>Here it is in a Fiddle. Thank you in advance and apologies if it is obvious.
836
To make an element sticky, do: make_sticky('#sticky-elem-id'); When the element becomes sticky, the code manages the position of the remaining content to keep it from jumping into the gap left by the sticky element. It also returns the sticky element to its original non-sticky position when scrolling back above it.
You can do this replacing position:absolute; by position:fixed; . Show activity on this post. There is something wrong with your code. This can be solved with position : fixed This property will make the element position fixed and still relative to the scroll.
One method involves placing both divs inside one parent container. Assign position: relative to the container, then use position: absolute on one or both child divs to position them however you want within the parent.
A pinned-down menu. The interesting rule here is the ' position: fixed ', that makes the DIV stay fixed on the screen. The ' top: 50% ' and ' right: 0 ' determine where the DIV is displayed, in this case: 50% down from the top of the window, and a constant 0px from the right.
You need to give position to sticky element like top:0; This will work with position:sticky; Using position:fixed; is not good.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
