Streaming live at 10am (PST)

CSS Sticky applied to more than 1 element causing glitchy behaviour


#1

Hi,

I have used CSS sticky inserted to a custom code element on a page (so I can see the effect in the designer). When I apply the class to call the custom code to more than one element it causes very glitchy behaviour, not only with the elements but parts of the webflow interface disappear and it freezes!

If I publish the site the glitchy behaviour does not happen, only in the preview mode in the designer.

As a test I tried duplicating the custom code element, gave it a different class name .sticky-2 and applied it to the second sticky element, the glitches seem to have stopped now. I know I can add it to the header on the page but can’t see the changes in the designer.

Is this a known thing that you can’t apply custom code embedded in a custom code element on the page to more than one page element?


#2

You should be able to apply that custom code to any elements, can you share your read only link please?


#3

Hi Aaron,

Here is the read only link: https://preview.webflow.com/preview/sisk-design?utm_source=sisk-design&preview=e39fae89ea97197719f52c188824be21

At the moment I have duplicated the custom code div and applied the two versions separately to two sticky position elements, you can see them both at the bottom of the list of elements.

You can find the sticky elements by clicking on the two large photos that stick to the top of the screen as you scroll down. You will end up selecting a hover trigger, up a few steps there is an element called sticky-container which as the class to call the custom code.

With the duplicated and renamed class for the custom code I am not getting the glitchy behaviour.
If you delete one of the custom code elements and change sticky-container combo class to the one you have not removed for both.

Then you will have the one custom element being called by the two sticky-containers, if you go to preview and scroll down to the second set of sticky elements and hover over the large picture and small pictures you should be able to see the glitchy behaviour.


#4

Like I mentioned in my previous message you don’t need that many custom code elements if all of your sticky elements are going to behave the same.

I created a small project to show how I build them:

https://preview.webflow.com/preview/ipagroup-sticky?utm_source=ipagroup-sticky&preview=307bee888062a1f814c9a8faed8f59f6

The sticky elements are going to be related to their parent element. Hope this make sense.


#5

Hi Aaron, thanks for that.

That is what I expected too but I was getting glitches that stop when I duplicate the custom code element.

I just tried it again to be double sure. I removed the second code element and the glitchyness was not immediately visible but…

When I published the site webflow crashed, grey screen, the browser tab crashed and I closed it.
Opened a new tab with my project, preview, no problem, published the site then looked at preview and again the same glitchy behaviour leading to a crash. This is the same behaviour as before.

Again I reversed it and added the second custom code element again and I can preview and publish and everything displays correctly.


#6

At the end you should use whatever gives you the result you want but I think is more an issue of structure. Glad you got it sorted.


#7

Thanks Aaron, yes I am glad it is working but without knowing why it is hard to not have the same problem again. I don’t think my build is any different to your approach, just to be sure I put the items into columns as you did, but I don’t believe that’s necessary and I moved the custom code element to inside the parent, but I think this can be anywhere on the page? Anyway, I think structurally there is no difference, crazy crashes though, and incidentally only in preview in webflow, not on the published site.

I will keep trying to figure it out. Thanks for your help.


#8

One thing that you had differently is that your class .sticky was the only class for the sticky element, on my element I had one class to format the element and then added a combo class of .sticky (or in my case .position-sticky). This worked okay.

When I remove that combo class and the main class and apply a new main class of .position-sticky it stopped working! I am a bit flummoxed at this. I wonder was the fact that it was a combo class calling the code causing the glitches.


#9

Sorry, had removed the absolute position so it stopped working.

So now I am just wondering if the problem was because I had called the code using a combo class. Going to add it now as a main class and see if I can re-create the problem.


#10

I think that was the problem, the glitches are not there now that the code is being called by the main class and the one class does for both elements.

Is it a known thing not to call code using a combo class?

Last question, your example calls -webkit, -moz, -ms, -o, mine was just webkit, is it important to call the others or is that an earlier version of the code?


#12

Yes it can be anywhere in the page.

It shouldn’t be that, but who knows right?

I just have those in case the user doesn’t have the latest version of their browser.


#13

Hi Aaron, thanks for your help, would you add those extra rendering engine references to all custom code that you add -webkit to as standard practice? Thanks!