Streaming live at 10am (PST)

Trying to create a "Sticky Element"


#1

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.”

Here is the same page on the recreated site thus far:
http://cbproject.webflow.io/jazz/quintet

Here is the Read-Only link for the project:
https://preview.webflow.com/preview/cbproject?preview=585fee97d40ef6f82149c2045e35bd41

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.


#2

Hi @Chuck_Braman!

Webflow natively doesn’t have “sticky” position. But to achieve it, you can use custom code section and use CSS code

<style>
  .yourcustomclassname {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 50px;
  }
</style>

This should enable you to have sticky element.


#3

Hi @Chuck_Braman and @Throatscratch

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.


#4

Hi @markos84uk,

Thank you very much for your suggestion.

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.)


#5

Hi @Throatscratch,

Thank you for your suggestion.

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?


#6

Hey @Chuck_Braman,

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.


#7

Hi @dennis,

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.


#8

Thank you so much, @dennis (and @markos84uk, @Throatscratch),

Thanks to your advice and support, I’ve got it working now.

This is the start of my first site in Webflow, and it feels so satisfying to be able to build this exactly the way I envisioned.


#9

Glad I could help @Chuck_Braman.

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!


#10

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.

Juval


#11

Thanks for your advice, @Juval_Kuerzi.