Sticky bottom and top react - html

Question

I have a react/tailwind project where I have a component that I want to be both sticky bottom and top.
In other words, I have an element that I don't want to go off-screen when the user scrolls up or down.
So when at the top of the page, the element is technically off-screen, but I want it to be at the bottom of the screen. And then when the user scrolls, the element should up along with everything else, but when the element reaches the top, I want it to stay there.
Example code:
<div>
This is the outer most container
<div>
This is an element that takes up space and pushes elements below
off-screen
</div>
<div className="sticky top-0 bottom-0" (this obv. doesn't work)>
This is the element I want to always stay on screen (sticky top and bot)
</div>
<div>Other elements</div>
</div>;
I've given it a few tries and googled a bunch but couldn't get anything to work.
Thanks in advance!

Answer 1

className="sticky top-0 bottom-0" does work, you just need to play around with the heights, something like this:
<div className="bg-red-600">
This is the outer most container
<div className="h-[128rem] bg-blue-600">
This is an element that takes up space and pushes elements below
off-screen
</div>
<div className="sticky top-0 bottom-0 bg-orange-600 h-28">
This is the element I want to always stay on screen (sticky top and bot)
</div>
<div className="h-[128rem] bg-green-600">Other elements</div>
</div>