Streaming live at 10am (PST)

How to create Sticky element on Scroll


#1

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)


Stop a fixed Div when somebody scroll at the end of the section
#2

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>

#3

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.


#4

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


#5

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;


#6

I’m a bit confused @bobhoran

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

Like this:

Hope this helps


#7

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


#8

Oh I’m sorry hehe

Here is the link:

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


#9

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

Bob


#10

Check this out:


#11

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

Thanks again though! This is super helpful.

Bob


#12

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

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


#13

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!


#14

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”.


#15

AWESOME! Alright, I’m diving back in haha


#16

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