Creating a Floating Button that Appears on Scroll

I’m trying to implement a floating button within my viewport that becomes visible once the user scrolls to the second section (#second) and below, and then disappears again when scrolling back up to the Hero Section.

I’ve attempted to use both the “position: fixed” CSS property and a reveal-on-scroll animation with an offset. However, I’m encountering some issues with the offset functionality. Specifically, the offset doesn’t seem to work as intended, and when I set it to 9%, the button disappears entirely.

I’m seeking advice and assistance on how to correctly achieve this behavior for the floating button. Any insights or solutions would be greatly appreciated!


Here is my site Read-Only: Webflow - Landingpage

1 Like