I'm working on a react/tailwind project that involves a component I want to be fixed at both the top and bottom of the screen.
In simpler terms, there's an element that I need to always stay visible even when the user scrolls up or down the page.
When the page loads, this element should appear at the bottom of the screen. As the user scrolls, it should move along with the content until it reaches the top of the viewport where it should remain sticky.
Here's an example of what I've been trying:
<div>
This is the main container
<div>
This is a block element pushing others off-screen
</div>
<div className="sticky top-0 bottom-0">
This element needs to stick at the top and bottom of the screen
</div>
<div>Other elements</div>
</div>;
I've experimented with different solutions and done some research, but nothing seems to work as required. Appreciate any help. Thank you!