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.
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.
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:
@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”.
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!
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!
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.
@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.
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.
