Below is a <div> element with it's position property set to sticky:
<div style="position: sticky;"> </div>.
When I insert two sticky <div> elements in a page, they both stick to the top of the page, and stick, in that sense that sticky elements are working, however, they stick at the exact same spot and cover each other up. In my head I imagined that they would both get to the top of the page, when the user scrolls the page, and stick, but I thought they would stack, but as I stated, they don't, one just sits under the other.
Here is an extremely simplified version of my current project. I want the two blocks to stick, one right above the the other.
<html>
<body>
<div style="display: block; position: sticky; width: 100% height: 25px; background: #555">
DIV ONE #1
</div>
<div style="display: block; position: sticky; width: 100% height: 25px; background: #555">
DIV TWO #2
</div>
</body>
</html>
So my question is, how can I add two sticky <div> elements, to the same HTML document, and have one <div> stick to the top of the page when the user scrolls, and the other <div> stick to the bottom of the first <div>, rather than also sticking to the top of the page and covering the that stuck first, up?
To ensure that what I am saying is understood, I have added an interactive example.
Below, the example will show you what is happening within my project — Div Alpha is being covered by Div Beta, and I want Div Beta to stick to the bottom of Div Alpha, so that it doesn't block it.
<!DOCTYPE html>
<html>
<head>
<style>
.div-alpha {
display: block;
text-align: center;
position: sticky;
top: 0;
width: 200px;
height: 200px;
font-size: 30px;
border: 5px solid #FF20B0;
background-color: #000000;
color: #FF20B0;
}
.div-beta {
display: block;
text-align: center;
position: sticky;
top: 0;
width: 200px;
height: 200px;
font-size: 30px;
border: 5px solid #80E000;
background-color: #002040;
color: #80E000;
}
h1 {
color: #401480;
}
p.lorem-ipsum {
width: 350px;
font-size: 18px;
color: #001064
}
p.p-alpha {
font-size: 14px;
color: #FF20B0;
}
p.p-beta {
font-size: 14px;
color: #80E000;
}
</style>
</head>
<body>
<h1>Testing Sticky Divs</h1>
---
<br>
<div class="div-alpha">
DIV ALPHA
<p class="p-alpha">The other div covers me up, and I don't want to be covered up!</p>
</div>
<br>
<div class="div-beta">
DIV BETA
<p class="p-beta"> I don't want to cover the other div, but I do anyway :..(</p>
</div>
<!-- The Code Below is silly filler code that has been inserted so that the page will scroll up & down, which is required for observing the behavior of elements that have their "position" property set to "sticky" (i.e. "position: sticky;") -->
<br>
<br>
<br>
<br>
<h2>Lorem Ipsum Text</h2>
---
<p class="lorem-ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam. Purus non enim praesent elementum facilisis leo
vel fringilla est. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu consequat ac felis donec et odio pellentesque. In ante metus dictum at tempor commodo. Amet massa vitae tortor condimentum. Sapien eget mi proin sed libero enim sed faucibus
turpis. Tortor at risus viverra adipiscing at. Leo urna molestie at elementum eu facilisis sed. Pharetra diam sit amet nisl suscipit adipiscing. Cursus sit amet dictum sit amet justo donec. Euismod nisi porta lorem mollis. Massa ultricies mi quis
hendrerit. Lorem ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ornare arcu odio ut sem nulla pharetra. Faucibus et molestie
ac feugiat sed lectus. Commodo quis imperdiet massa tincidunt nunc. At augue eget arcu dictum varius duis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Convallis
posuere morbi leo urna molestie at. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tristique senectus et netus et malesuada fames ac. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ut aliquam purus sit amet luctus
venenatis lectus. Posuere urna nec tincidunt praesent. Aenean et tortor at risus viverra adipiscing at in. Justo eget magna fermentum iaculis eu. Placerat vestibulum lectus mauris ultrices eros in. Pharetra vel turpis nunc eget lorem dolor. Blandit
turpis cursus in hac habitasse platea dictumst quisque. Nisi porta lorem mollis aliquam ut porttitor leo. Lectus nulla at volutpat diam ut venenatis. Proin nibh nisl condimentum id venenatis. Arcu felis bibendum ut tristique et egestas quis ipsum.
Feugiat nibh sed pulvinar proin gravida. Odio facilisis mauris sit amet. Gravida in fermentum et sollicitudin ac. Magna etiam tempor orci eu lobortis elementum nibh. Donec ultrices tincidunt arcu non sodales. Consequat ac felis donec et odio. Amet
mattis vulputate enim nulla aliquet porttitor lacus luctus. Sagittis purus sit amet volutpat consequat mauris nunc. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Diam sit amet nisl suscipit. Viverra tellus in hac habitasse platea
dictumst vestibulum. Praesent tristique magna sit amet purus gravida.
</p>
</body>
</html>
