Fixed sidebar - how to show after header?

I have a sidebar that is fixed on the left side, I want it to be hidden until after the user scrolls past the hero header.

I’ve tried using using opacity in the interactions but I get weird results and can’t get it to work. I’m wondering if I’m approaching it correctly or missing a simpler way to achieve the same result.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

image
It looks like you haven’t set the opacity change. Even though it says 100%, it’s greyed out. Type in 100 in the 27% keyframe and then 0 in the 0% keyframe

1 Like

Thank you. I solved the error but still isn’t working right :thinking:

Now it’s transparent as soon as I scroll a little bit on the live preview and on the live site it just shows up transparent on page load. What does the keyframe refer to, is the the overall % of the page height? Rather confused by this :sweat_smile:

Sorry I’d missed the notification for this.

Yes that keyframe is the overall % of the page height

1 Like

Got it, thank you, my friend! It’s up and running!

1 Like

To show the fixed sidebar after the hero header, use JavaScript to detect scroll position and add a class to display the sidebar once the user scrolls past the header. Ensure your CSS handles smooth opacity transitions. Check the Read-Only link for specific adjustments.