Streaming live at 10am (PST)

Need help creating a sticky sidebar

I’m trying to make my sidebar sticky as you scroll through the content. This is something I always struggle with and can never figure out!

I appreciate anyone’s help.


Here is my site Read-Only: https://preview.webflow.com/preview/fairly-odd-streamers?utm_medium=preview_link&utm_source=designer&utm_content=fairly-odd-streamers&preview=25742c50485bb34fdc1a24bbebed040f&pageId=5e233f592e290c9651c877e8&mode=preview
(how to share your site Read-Only link)

Hello.

I have struggled with this myself. I have just videoed myself doing it which hopefully will help you get it sorted. You can find it below :slight_smile: Here is also a link for working with a sticky sidebar in the future: https://www.youtube.com/watch?v=qM9oPp_eDR0

1 Like

@Nicole_Klaver thank you so much! Bookmarked the video for future reference.

1 Like

what can i do if the side bar is longer than the viewport? What happens is the stickied element doesn’t show the bottom part until the page is fully scrolled. (See this screen recording: https://www.screencast.com/t/FGAQxjITtsNv)

What i’d want to happen is the stickied element fully scrolls in both directions

Could you please share your site Read-Only link :slight_smile:
Then I can take a look at it and get a better idea on how to assist.

Hey, @Nicole_Klaver thank you so much for the idea… love it :heart_eyes:

1 Like

https://preview.webflow.com/preview/avicenna-cardiology?utm_medium=preview_link&utm_source=designer&utm_content=avicenna-cardiology&preview=592917f230c906bd5d8b1eb5ea47eb36&mode=preview

Thanks!

Hello.

‘Sticky’ will keep the sidebar fixed to the side of the screen after the user hits a defined distance from the top of the viewport. It will remain in place until they reach the end of the page. And because yours is larger than the viewport, it will shift when reaching the bottom. My suggestion would be to make the sidebar (sticky element) fit within the viewport. Sorry I can’t be of more assistance.

Good luck :slight_smile: