Streaming live at 10am (PST)

Sticky navigation on scroll with IX2


#1

Hey Guys,

does anybody of you know, if a navigation that sticks on top on scrolling is possible without custom code?
Something like their navigation.


#2

Has nobody an idea how to get this work in webflow?


#3

Not sure with IX2 but with some extra code it’s possible :grinning:
http://sidebar-scroll.webflow.io/

Preview:
https://preview.webflow.com/preview/sidebar-scroll?preview=033e2e6af74e4dc44516632728f7acbb

Does it help?

Edit: Yeah, read that you wanted it without code but wanted to try and help any way.


#4

Hi @jorn,

for the moment it’s a great solution, but the browser support seems not so wide, especially for IE and Opera Mini. Do you know a solution that covers more browsers and is so slick as yours?


#5

This has been discussed before on the forums and you’re right the position sticky is not accepted by all browser yet. I haven’t tried this but one solution is to use interactions and swap divs. One disappear and one appears when you want. I’m sure I’ve seen a great example of this. I’ll try and find it.


#6

It is a pity that browser support is not available after 5 years.

Yeah, I thought something similar, but for a big site, this would make things become messier. I try to hold the site as clean as possible so that they will be smart to maintain.


#7

Just use a symbol then. Put it in divs with different positioning and swap as necessary. As easy to maintain as one object.


#8

I haven’t read this article thoroughly but it seems they don’t use position sticky anyway. Can you make something from that? Don’t now your skill level on custom code.


#9

Hi @dram,

of course, this would be a way and I did something like that on other pages, but I try to come up with something, that’s slicker than this. With two navigation, you have to make every change to both navigations and also for a third navigation, the mobile one.

This seems to work for my case, but I hope webflow will make an update on IX2, that something like this makes easy possible.

Thx for your help.


#10

I mean if you are using a symbol you have to update only one instance of it not two. And with careful styling you can have mobile and desktop versions as one item too.