I want to make it do that when a user scrolls down a page, one of my react components reaches the top of the page, and stays there, not going any further up.
Imgur link to 'intranet' app im building: https://imgur.com/a/nWdDOrC
In the image, the component with the thick red border should stay at the top of the page when scrolling, with a margin. Tried fixing position, but I don't want it static, just not scrollable past the top of the page.
There are other similar questions, but none that seem to tackle this particular problem exactly - please correct me if I'm wrong.
You should look at the sticky position in css.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
.component {
position: sticky;
top: 0;
}
ref: https://www.w3schools.com/howto/howto_css_sticky_element.asp