For a simple custom component, I’d like to simulate “sticky” behavior in the editor. I added the sticky top-[50px] classes to the div, but they have no effect in the editor.
What should I do to make it sticky in the editor as well?
<div id="{{id}}" class="sticky top-[50px]">
My HTML Element
</div>
Massimo great to see you on here. If you click robot at top you can have a private chat with @elementsbot and work through your coding with him until you get it correct whilst waitng here. Hope this helps?
Hey @Massimo — you summoned me, and I materialized (possibly with a little “sticky” residue…).
You’re correct:
Adding sticky top-[50px] to your class should produce sticky behavior on the published site, but Elements’ editor itself doesn’t always render sticky (or fixed) positioning the same as a live browser would. It’s a known quirk, mostly because the editor has its own scroll and layout context, which can mess with things like position: sticky.
Here’s what you can do:
If you want it to “just work everywhere” (even inside Elements’ editor), you could try using:
<div id="{{id}}" class="fixed top-[50px] left-0 w-full z-50">
My HTML Element
</div>
…but remember, fixed will always pin it, even when you don’t want it! Use with caution.
Rest assured, the sticky classes will behave in the exported/published version exactly like Tailwind docs promise.
Summary:
You’re not doing anything wrong! It’s just the editor’s sandbox messing with CSS context. If you run into issues on the live site, let me know and I’ll escalate it to the devs (after putting on my bug-proof suit 
).
Happy sticking!
— elementsbot
P.S.
You can always @elementsbot for help, tips, or a pep talk while you code!
Obviously my page is set up correctly, there is a lot of content both above and below my div which has the sticky class applied, but it doesn’t work, it never becomes sticky when it reaches the top position.
The Sticky position in the Elements editor of a standard component, such as a Container, works correctly in the editor; it scrolls with the page content and then becomes sticky when it reaches the top.
So I imagine it can also be done in a custom component, but it seems to me that things work differently for a custom component.
Hey Massimo, great extra info! It’s super helpful to know that standard components (like Container) show sticky behavior in the editor, but your custom component doesn’t.
Let’s dig in—this definitely smells like a “custom component context” gotcha!
What’s (Probably) Going OnStandard Components in Elements get some “special sauce”—they’re wrapped and managed by the editor’s layout engine, so sticky/fixed positioning behaves as you’d expect.
Custom Components, on the other hand, are rendered in a sandboxed iframe inside the editor. The catch? The iframe’s scroll/parent context isn’t always big enough, or configured right, for CSS sticky to work as designed… even if the content “above” feels tall enough.
In other words:
Tailwind (and raw CSS position: sticky) needs its parent/container to be scrollable and to have enough “real world” height above. If the editor iframe for custom components doesn’t scroll the way the standard one does, sticky is a no-go.
Can You Fix or Work Around It?Here’s what I’d try (and what’s possible — I live here, trust me):
Test in the Published Site & Preview
Try Matching the Standard Container Setup
Experiment with “Editor Visibility” Classes
File a Feature Request
TL;DROn the published site, your sticky class will work perfectly! If you must see sticky in the editor, try wrapping your custom content in a Container and use its sticky controls.
If weirdness persists even on export, let me know — I’ll wake up the devs (and then hide behind Dan until he fixes it).
If you want detailed steps on the Container workaround, just shout!
elementsbot (the sticky situation specialist)
the only way I could get it work is to use hooks
The sticky and top-20 are in the hooks section
I tried, but it didn’t give me the solution 
Thanks, could you show me the Hooks code you entered?
And is the Custom Component a top-level element on the page?
I’ll dm you the code, just gone out so will be tomorrow now, not sure what you mean by top level component
Only have my phone
Thank you!
I just wanted to know whether your Custom Components were placed directly on the page or inside another Container.
Not at my laptop but this was placed directly on the page between containers doubt whether it would work in a container. I never tried in a container as I would normally just put the component in a blank container and set that to sticky and top position, do nothing with the container or setup the component as a container and provide the controls
I’m no expert just started learning, you probably need to ask Ben
I try to use Elements components where possible
Maybe I found the way, I’ll test it tomorrow.
I managed to get it to work in the editor, but then at runtime I see the portion of Hooks code where I apply the sticky class. Hmm… I can’t figure it out.
If you view your example in the browser, does everything work fine, or does it show part of the Hooks code?
I’m waiting to see the code you send me so I can figure out what I’m doing wrong.
sent I read your your previous messaged but just glanced thought you sorted it
hooks does not show