How to Show an Element When It Reaches a Specific Scroll Position in React?
Question:
I’m working on a React project where I need to show an element once it reaches a specific scroll position from the top of the viewport. The element should be initially hidden, but when the user scrolls and the element reaches a certain distance from the top, it should become visible.
Here’s a more detailed description of the behavior I’m trying to achieve:
The element should be displayed only after it has scrolled past a certain margin from the top of the viewport
Before reaching this scroll position, the element should remain hidden.
Suppose there are 5 components total in a page.
But initially 3rd component is hidden and I want that when the user scrolls and gets to the pt where the 3rd component should have been present if it was displayed block then only toggle the display property to block and make it stick to the top as header.
based on display: block and hidden. I am adding some animation so that it fades in and out.
I tried using Intersection Observer and play with root-margin but it didn’t work.
Workaround that I used:
I observed 2nd component of my page. As I was sure that initially it would be visible on the viewport and when it passed 2nd component I showed the 3rd component.