Streaming live at 10am (PST)

Sticky Sidebar on Scroll


#1

I have seen a post for something similar before but unfortunately all the links are dated on it. I am trying to create an interaction that when scrolling and the top of the screen hits my sidebar it sticks and becomes fixed on scroll.

I know the one way to do it is when you scroll into view, hide the first sidebar and make a duplicated fixed one appear but I want to keep it simple. I would prefer to just have it use the same sidebar and have it fixed once hit.

http://agentfire-blog.webflow.io/


Here is my public share link: https://preview.webflow.com/preview/agentfire-blog?preview=e048c04d48418f92d65cbdf2065a9683
(how to access public share link)


#2

I know that you can achieve that with custom code but I don't know much about custom code. I just did it the way you mentioned, duplicating the element.

I'm going and try the thread where that custom code is given and I'll update this comment once I found it.


#3

There is an example that @cyberdave did here with a button in a second colm that is exactly the interaction I want. But when I preview it in webflow I do not see any custom code, interaction or further explanation on how it was done:


#4

That specific example is posted on the code help section of the forum so I will assume that it has custom code.

Check this example I made, hopefully helps in some way.

http://gateway-club.webflow.io

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


#5

@aaronocampo thanks buddy. I can't see which element has the sticky nav interaction. I have clicked on all of them and none seem to be assigned to the "StickyNavBar".


#6

The sticky Navbar is here:

here is the class:

and the trigger element is the Hero Section:

Let me know if that helps.

Cheers,


#7

Thanks for that! Ya it is the way I know how to do it to but good for reference. I was just hoping there was a way to do it without having a duplicated section. I might just do this in the interim and hope someone can post another solution that does not require duplication!


#8

So I have set up the stick sidebar interaction here but I am gaping out on how to get it aligned with the actual sidebar. It looks fine in the preview but I guess as it scales larger / smaller it is no longer aligned. I need to make it look like that one part of the sidebar just sticks on scroll. If someone can help that would be great!

http://agentfire-blog.webflow.io/


#9

position:sticky is coming out soon on the latest Chrome and it's already supported on Safari. Check it out https://webdesign.tutsplus.com/tutorials/sticky-positioning-with-nothing-but-css--cms-24042

Unfortunately it's not supported in IE or Edge yet, but shouldn't matter much. http://caniuse.com/#feat=css-sticky


#10

@thesergie Sorry I had the interaction disabled on my site while I was working on it. It is back live now: http://agentfire-blog.webflow.io/

So are you saying that if can not be done presently with webflow. There is no way to align it properly?

I have seen it done here but I am not to sure how he has done it: http://sticky-kit-integration.webflow.io/


#11

It can be done with interactions the way you're doing it, but you should add a left or right value when setting the position to fixed or else it will move it from it's original location. Also it's common that when it's fixed the width changes so if you want it consistent when it's normal positioning and fixed positioning give both the same width.


#12

@thesergie Unless I am missing something here (which I totally could be ahah) I believe I have done that.

If you take a look at it on the dashboard it is aligned fine. But when the screen size adjusts (like on the live version) that is when the alignment is off.


#13

It looks like you have left: 2% on the sticky-sb class. Remove that left value and make sure the width on stick and non sticky are the same as I mentioned above.


#14

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