Problem with sticky menu

[Mowgli]

I’ve built a sticky menu which first appears half way along the page and stays at the top once you scroll it to that position. It all works fine except that the trigger action of “scroll out of view” also reveals the sticky menu when scrolling in reverse. Ie when I scroll my menu out of view through the bottom of the browser window that should be the end of the menu yet it promptly reappears in its fixed position.

[sabanna (Anna)]

Would be nice to have a read-only link, it would help to understand better what the issue you have

[cyberdave (Dave S.)]

Hi @Mowgli, here is the info on sharing the read-only link: Share a read-only link | Webflow University

[Mowgli]

Here’s the link. Look at the sticky totals panel on the right. As long as your browser window is a certain height it all works ok but if you reduce the browser height the sticky panel comes into view when it shouldn’t

https://preview.webflow.com/preview/bug-sticky?preview=4299be23022190db7375f858f34c4afa

[sabanna (Anna)]

Hello @Mowgli.

1. In your project interaction “Show stick total” applied to 2 elements: div “trigger” and div “non sticky nav”. Not sure if it is should be like that or it is mistaken.

2. When you reduce browser high enough for hide element with interaction, your “sticky nav” will appear.

[Mowgli]

I’ve removed the interaction from “non sticky nav”, that was a leftover.
The problem is exactly what you say:
“When you reduce browser high enough for hide element with interaction, your “sticky nav” will appear.”
How do you avoid this? The sticky element shouldn’t be in view until its non sticky doppelganger has touched the TOP of the browser window, not when it disappears down the bottom.

[sabanna (Anna)]

SCROLL interaction works not only with “top age”, it works with all screen view.
So you can fix this situation by applying your interaction to another element, which will be still in the screen view, even when you reduce browser high (at least its top age). Like column “delivery tabs”, for example. Or even better way: wrap elements “tabs”, “m171 promo code” and “trigger” with div and apply that “show sticky nav” interaction to that div (only!). To me works perfectly.