I’m a Muse refugee trying to recreate one of my old sites in Webflow and am stumped at how to get a div to stop scrolling once it reaches the top of the viewport.
You can see the effect on my old site here:
As you scroll down the page, once the navigation buttons on the right side reach the top of the viewport, they stop scrolling with the page and remain as persistent navigation. I’ve been told that the type of behavior I’m trying to create is called a “Sticky Element.”
Is there a way to achieve this in Webflow? If so, could someone advise me as to the steps involved? (I tried to figure it out using interactions, but without success.)
Thanks.
PS I have no idea why a graphic with the “New York Jazz Bands” logo replaced a plain URL that I typed. This logo and text is referencing another, different website of mine, which has a different URL than what I typed. However, if you click on the link in the graphic, it will take you to the site referenced in this post, not the site referenced in the graphic. I apologize for whatever confusion this adds to my question. I’m separately going to contact the company that’s hosting these two sites to try to figure out what’s causing this.
You can actually do this without code, a little bit of a cheaty way but it’s similar to the way you would make the navigation sticky.
If you duplicate your element and give it position:fixed where you want it to stick, you can then create an interaction so that when the original “non-fixed” element is at the top of the screen, the original one disappears, and the fixed one appears in it’s place.
As you scroll back down, you reverse the interaction.
The user doesn’t see this happen as it will be instantaneous but you’ve just created the desired effect. I find this easier than the code as you have more control over the way it works.
The problem with this technique for my use case is that the navigation is placed within an absolutely positioned div (“div jazz buttons”), which is within a right column div (“div column right”). If I change the position of the element to fixed, it breaks out of the structure of the page and aligns with the viewport instead of the column, which I don’t want.
I know little about CSS, but could it be that the reason this was possible to achieve in the site’s previous incarnation in Adobe Muse was because that design was static and that the same effect cannot be achieved at all within a responsive design, such as I’m creating now in Webflow? (The other alternative might be that it could be achieved in a responsive design, but just not presently within Webflow.)
I used the embed component to add the code at the bottom of the body element, and within the code, I replaced .yourcustomclassname with .div-jazz-buttons, but for some reason, it does not seem to have any effect.
This may be a dumb question, but the embed component is labeled an “HTML embed code editor,” whereas your code is CSS. Is it actually used to add either HTML or CSS, or could I be doing this wrong?
Your try with the embed component isn’t the most elegant in webflow but it would work for what you are trying to do.
The problem why your sticky navigation isn’t working currently is, that you need give the element which should behave “sticky” a kind of track. The column in which the sticky nav element is placed needs to stretch to the end point of where its supposed to stop behaving sticky. So you basically need to put all your content from this page into the left column so that the right column can stretch all the way down to where the content of the left column ends.
Here is a webflow made tutorial how to integrate a sticky side element. Perhaps its easier to see how the structure needs to be build for the sticky behavior to work:
Also for integrating custom code into webflow. If you click on the left menu on “pages” and then click on the settings icon for an individual page “View page settings”, you will find two areas under the “custom code” accordion in which you can enter your own code either in the head tag or in the before body end area. This method though will apply your custom code only for an individual page. If you want to add custom code site wide you can find the same two custom code areas in the projects settings.
The code you integrated with <style> can just be placed in the custom code area for the <head> tag.
Thank you very much for this detailed advice. This looks like the solution. I’ll let you know how it goes as soon as I’ve had a chance to work through it.
Its a great feeling to get exactly what you wanted to create working in webflow. Webflow has enabled me to bring my designs to life and given me complete control over the whole process of website creation.
Enjoy your time and learning process with webflow!
Hi @Chuck_Braman
here the most simple solution for the problem!
Since it is basically a fixed header, the only issue is making it invisible on the first section. That can be done by putting it behind the top section using Z index. I did this on one of the templates by making the navbar fixed and setting its Z index to 1 and setting the top section’s z index to 2. This put the navbar behind the first section but on top of all others since they are set to none by default.
Hey Guys ~ really appreciating all the help and suggestions I’ve used from this help sections.
But keeping with the STICKY element, which seems to be not easily done through the designer dashboard, I want to re-create this logo stuck right in the middle of the page, at 50%VH, all the time, whether the page scrolls or not. Is this also done through custom css?
Thank you in advance!
At the very least I also know that I’ll need to set that element to relative, and use the z-index to bring that element on top of everything else. But, to get it to stay put, that’s what I need help to do if anyone has a great way to achieve this.
If it’s going to be stuck there the entire time, then you can use position: fixed instead and throw it within a div element set to flex with justify and align set to center.
I’m sure a quick search on the forum will give you a bunch of other answers that may help, but let me know if you’re having trouble
ok, very good to know! Thanks so much for info, it’s much appreciated. I’ll give this a try. But since it’s floating on top of other elements, wouldn’t I have to raise the x-index in relation to the others, to make it float above in a fixed position?
Hi Mikeyevin ~ I got this to work ~ http://mk-inspire.webflow.io But there’s problem.
Since the eye icon is floating above the text, I can’t touch the text, or copy paste, as long as the icon is set above it. Is this because the div is set to fit completely over the screen? What would you do in this situation if you wanted to be able to access the text?
There is not much you can do in webflow itself I think. The div with the eye is above everything else and you cannot select something “under” this div. But there are several ways to achieve this with custom css. Give them a try!
Thanks Dram ~ I managed to give the element a max height of about 300px and 100% width, so whenever the copy below the sticky icon isn’t right within that 300px horizontal section it’s clickable, and I’m all good there.
Without digging into your read-only link, it looks like you have the image contained within a div that’s taking up 100% width instead of just the width of the graphic (I just noticed your reply, so this is definitely the case, but you should be able to limit the width as well!) – but as @dram mentioned, there’s not much you can do when you’re overlaying an image over text as you’ll be limited to what is accessible below your floating element without some additional modifications. Even with these changes, I think your visitors will still have trouble with the presentation.
If we take a step back here, I’d like to ask why this type of functionality is desired? If it’s because of a client, I would explain to them that this element is negatively affecting user experience and should be reconsidered. If it’s a personal preference, I’d urge you to look at some alternative options here like showing the image behind your text – even if it appears over the background div of the element on the left side – although this may look strange.
What’s the purpose of putting the graphic so large and front-and-center?
