Position sticky top animation works only when scrolling down, otherwise there is a jump

I have a sticky bar on the right side of my page and I want to animate its top property (and height) to nicely fit its transition to disappearing announcement bar at the top of the page. Below video shows the current issue:

when I scroll down: announcement-bar-height changes from 80px to 0 and the top and height properties in my right bar is nicely animated however, when I scroll up and the annoucement-bar appears, then only height of my right bar is animated and top is jumping

https://streamable.com/7gylow

Here is my annoucement bar component:

export const AnnouncementBar = () => { const currentUserQuerry = useCurrentUser(); const user = currentUserQuerry.data!; const [open, setOpen] = useLocalStorage('ANNOUNCEMENT_BAR_', true); useEffect(() => { const root = document.documentElement; if (!open) { root.style.setProperty('--announcement-bar-height', '0px'); } }, [open]); if (!open) return null; return ( <ClientOnly> <div className={cn( 'z-[50] h-[var(--announcement-bar-height)] w-full border-y-[1px] border-border/90 scrolled:h-0', 'flex items-center justify-center text-sm transition-[opacity,height] duration-200', 'overflow-hidden scrolled:border-none scrolled:leading-[0] scrolled:opacity-0', 'fixed left-0 top-0 bg-header p-2' )} > ... </div> </ClientOnly> ); };

Here is my CSS:

html { --default-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; font-family: var(--default-font-family); --header-height: 80px; --announcement-bar-height: 80px; @media (min-width: 768px) { --announcement-bar-height: 40px; } --toc-height: 0px; scroll-padding-top: calc( var(--header-height) + var(--announcement-bar-height) + var(--toc-height) + 5px ); &[data-scrolled] { --announcement-bar-height: 0px; } scroll-behavior: smooth; }

This is my right bar class:

sticky right-0 top-[calc(var(--header-height)+var(--announcement-bar-height)+var(--toc-height))] z-[10] hidden h-[calc(100vh-var(--header-height)-var(--announcement-bar-height)-var(--toc-height))] shrink-0 flex-col items-start justify-between self-start border-l bg-card shadow-md transition-all duration-200 md:flex

and this is my header class:

fixed z-40 mt-[var(--announcement-bar-height)] w-full transition-all duration-200

Finally, this is my layout:

<div className='flex min-h-screen flex-col'> <ClientOnly> <AnnouncementBar /> </ClientOnly> <HeaderApp /> <main className='flex flex-1 pt-[calc(var(--announcement-bar-height)+var(--header-height)+var(--toc-height))]'> <div className='container px-2 py-2 md:px-6 md:py-6'> {children} </div> <QuickBar /> </main> <Footer /> </div>

Any ideas how can I make this animation work when scrolling up?