Sticky Frame above content

Hi evrybody,

totally new (comming from WP, WOO, foursquare) and just started to go to all the academy stuff. As i have a new project i am thinking about just jumping ship and use this to step up the learning curve.

Only thing is that there should be a sticky frame “obove” the actual content with the content scolling behind it. See an example here about what should be achieved: https://la-petite-ivy.com

Is it possible to create this with Webflow? Maybe someone has a hint on where to start or how to structure the project.

Many thanks
Olexi


Yes this can be done in Webflow, do you have a project already that you can share so we can help you in it? If so please share your read only link please.

Ok cool, many thanks @aaronocampo. No, have not started yet. Still trying to find out if i should use WF for this project. Would be my first one. So basicaly just checking out if it would be possible.

Is it possible to describe roughly how the structure of the page must be setup to get tis done and how this could be achieved … or is it to complicated to describe? Or maybe to challenging for a first project?

I don’t think it’s too difficult to do it will depend on your learning curve, but rest assure that Webflow is capable of this and much much more.

Happy designing!

I’ll try to mockup something later for you, hopefully I’ll get some free time for it.

Would be amazing to get some direction on how to set it up and start. Many thanks.

Got some help in the FB group and managed to get the sticky frame done pretty quick … like 5 minutes. Just a fixed element with a higher z-index Only problem is that links, buttons etc. need to stay on the top “layer” to be interactive.

1 Like

The question really is not about Webflow per-say, more about how would one layout “this” with HTML / CSS. The designer is very capable. If a feature (CSS) you need does not exist, you can just add it with custom CSS.

1 Like

So you have it sorted?

@webdev unfortunately my understanding of HTML / CSS is way to limited to write this as custom CSS. I was hoping to find a way doing this in WF. We will see, mabe i will find a way to get it done or adopt my design idea to the design tool.
@aaronocampo … a first rough draft, but still limited by the button-problem :slight_smile:

Please share your read only link and I’ll take a look.

Here we go … this is just quick and dirty to play around and to understand and learn WF.
This is not the actual project i am thinking about.

https://preview.webflow.com/preview/olexis-groovy-project?utm_source=olexis-groovy-project&preview=41a48aa93068b5211f0fc2801168a5b4

Maybe adding css pointer-events: none; solves the issue. But i fail to add the code to the element. Where do i need to insert it?

Ah, its in the page settings. Have to upgrade to a paid plan to get this option.

Check this, if its what you need you can clone it :slight_smile:

@shokoaviv many thanks. I have achieved the same in the meantime but still have the issue with geting links and buttons klickable.

That’s exactly what will solve the issue. There are three ways of adding custom code. Here is the first one, and here are the second and third ones.

I would suggest moving from hypothetical if’s and starting to build out the areas that are not common. If you get stuck you could then come back to the forums and describe the issue, providing your read only link where we could jump in and take a look, and share a possible solution using your site as the example.

Honestly sharing your read-only project this is one of the most powerful aspects of webflow that I don’t think that can be done anywhere else today.

As i have not signed up for a paid plan the custom code is not an option. I try to build that frame from 4 seperate opjects now. So far it looks promising. Just trying to figure out the right possitioning of these objects at the moment. But as the frame is buildt from seperate objects the problem with links and buttons is solved.

@webdev this is not hypotetical. I am actually trying to build that and the link was already shared?

Hi, finally i got this done in a way that brings all the design and functionality i wanted. Don’t know if this is the smartest way to do it but it works. I created the frame from seperate elements.

Many thanks for your support and feedback :slight_smile:

If somebody is interessted here is what i did: https://preview.webflow.com/preview/olexis-groovy-project?utm_source=olexis-groovy-project&preview=41a48aa93068b5211f0fc2801168a5b4

Sorry, missed the link. Tired eyes from coding all day!

1 Like