Streaming live at 10am (PST)

How to create Sticky element on Scroll

Is there any way to recreate the Sticky sidebar they have here in Webflow?

I’d love to have it become sticky when it scrolls and reaches its top.


Here is my public share link: LINK
(how to access public share link)

In the Webflow case they’re using custom code:

<style>
  .course-sidebar-wrapper {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 50px;
  }
</style>
1 Like

Hah, I thought that just because it was on a Webflow page they used Webflow to make it. Didn’t even occur to me that it can be custom code. Thanks.

position: sticky is something I’ll consider. I just worry about browser support.

1 Like

Well, technically they’re using Webflow, you can see that here:

A custom embed is an element from Webflow

Although you can take another work around more “Webflowised” like this one I created here with the navigation bar:

https://preview.webflow.com/preview/gateway-club?preview=b423466796c72da845d376819b4ee671

And here’s another approach similar to the one I did:

Let me know if that helps

1 Like

Hey Aaron! I was wondering how you were able to get that screenshot of inside that webflow project? I’d love to poke around and see exactly how they pulled off position: sticky;

I’m a bit confused @bobhoran

I just opened the Custom code editor on the project where they created that site.

Like this:

png

Hope this helps

I’m sorry - I guess my question should’ve been “how did you get access to that project?”

Oh I’m sorry hehe

Here is the link:

preview.webflow.com/preview/help-site?preview=74bf04bc2857da904aa0a2d5fcfedd4d

Awesome, thanks! Do you know if there is a list of links somewhere to more projects such as this?

Bob

Check this out:

4 Likes

Wow - you rock! Really wish the preview for Interactions v2, was known.

Thanks again though! This is super helpful.

Bob

1 Like

I went ahead and made a clone-able project!
Hope you dig! :metal:t3:

https://webflow.com/website/Sticky-Sidebar-with-Flex

3 Likes

Hey man, thanks for much!

I’ve pretty much recreated the Sidebar Wrapper, but can’t seem to get it to work…

I’ve set the classes the same way, except for Flexing it. Reckon that’s the issue?

Cheers in advance!

Yes, dude. So, I had the same issue when I used Columns/Rows instead. But when you use just Flex Items instead they are their own elements essentially and not tied to a row… so I think this is what gives it the freedom to “stick”.

1 Like

AWESOME! Alright, I’m diving back in haha

1 Like

Awesome man! Let me know how it goes!
If you click the link I left… I made the project cloneable!