Community forum for knowledge and support

Updated 6 months ago

Disappearing fixed arrow to indicate scrolling

At a glance

I have a fixed arrow on my page to indicate to the user to scroll down. Would someone know how to make it dissaper once you've reached the bottom? Here's a screen recording explaining it.

Q
M
3 comments

Also... is there a way to add an interaction where when you tap this arrow it scrolls down 30-50% ?

first question can definitely be handled by webflow interactions - second question - I really doubt because you would need to first calculate the full height of the page based on what ever size the user's screen is and then be able to calculate what 30 or 50% of the screen/site would even be. In other words, likely need custom JS for that.

For the first one, it'll be a page trigger > while page is scrolling. In the interactions panel you'd go with the starting point 10% from the bottom (90%) and the end being 100%.

Here's a Webflow University video on this but in the opposite way that you are trying to do it and with a different element but the interaction keyframe concepts are the same.
https://university.webflow.com/lesson/show-and-hide-navigation-bar-on-scroll?topics=interactions-animations

Add a reply
Sign up and join the conversation on Slack