React-waypoint topOffset example code or how to use in reactjs

Question

Can any one please tell me or send me sample code for how to write the code for topOffset in react-waypoint please.

Answer 1

Its really simple, you just need to add it as a prop < Waypoint topOffset="50px" />

For instance, if your app has a 50px fixed header, then you may want to specify topOffset='50px', so that the onEnter callback is called when waypoints scroll into view from beneath the header. You can check the documentation here

I coded a simple example that might help in case you need it

https://codesandbox.io/s/testing-react-waypoint-mhukn?file=/src/App.tsx

Answer 2

I have some example code that does sticky top. You can set the offset.

https://codesandbox.io/s/epic-ellis-gtvbl?file=/src/header.jsx