I'd like to make an element sticky such that it "sticks" to both the top of the page if the user scrolls past it, and to the bottom of the page before the user scrolls to it.
I understand how to make it sticky in one way, but not both
I found the answer myself by slightly augmenting this solution
HTML (unchanged):
BEFORE
<div class="hold">
<div class="item">
THING
</div>
</div>
AFTER
CSS:
.hold {
position: relative;
margin-top: -2000px;
margin-bottom: -2000px; /* Added this line */
pointer-events: none;
}
.hold:before {
content: "";
display: block;
height: 2000px;
}
/* Added the following block */
.hold:after {
content: "";
display: block;
height: 2000px;
}
.item {
pointer-events: initial;
position: sticky;
top:0; /* Made this addition */
bottom: 0;
z-index: 100;
}