Left column fixed after scrolling down

Does anyone know how to accomplish this. Not sure if this is an interaction thing or some java script. If you see the example site, once you scroll to the last content/ad to the left the column stayed fixed and the center/right content keeps scrolling. IF anyone can point me to the right direction I’d appreciate it. Thanks guys!!

Example Site


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

Hi, this behavior is most often called “Sticky”.

As a “sticky navbar” is a navbar that will scroll with the page but stick on the top of the viewport when it reaches it.

CSS has a property for that: position:sticky but it’s not avaliable in Webflow and I dont recommend using it yet, as it’s not very well supported:

http://vincent.polenordstudio.fr/snap/pr3ka.jpg

So, you can still have this behavior with Webflow.

The all-in-webflow solution is to make a symbol of the content that needs to behave sticky. Because you’ll need 2 occurences of it and making it a symbol is easy to update it afterwards. The principle here is to make one of the copy fixed and stick to the top of the viewport, hide it, and make it un-hide on scroll when the original in-line version reaches the top of the viewport. It usually works great.

Search for “sticky” or “sticky navbar” on this forum to read many solutions about it. There is also ways to do it with Javascript.

3 Likes

Awesome totally makes sense how you explained it. I think I’ll try the all-in-webflow version looks a lot less complicated. Thanks =)

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.