Анимация закрепления позиции сверху работает только при прокрутке вниз, иначе происходит прыжок ⇐ Html

[Anonymous]

У меня есть липкая панель в правой части страницы, и я хочу анимировать ее свойство top (и высоту), чтобы она хорошо соответствовала переходу к исчезающей панели объявлений в верхней части страницы. Ниже видео показана текущая проблема:

• когда я прокручиваю вниз: высота панели объявлений меняется с 80 пикселей на 0, а свойства top и height на правой панели хорошо анимируются.
• однако, когда я прокручиваю вверх и появляется панель объявлений, анимируется только высота моей правой панели, а верхняя jumping

https://streamable.com/7gylow
Вот мой компонент панели объявлений:

Код: Выделить всё

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 (

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'
)}
>
...


);
};

Вот мой 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;
}

Это мой класс правой панели:

Код: Выделить всё

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

а это мой заголовок clss:

Код: Выделить всё

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

Наконец, это мой макет:

Код: Выделить всё

{children}

Есть идеи, как заставить эту анимацию работать при прокрутке вверх?

Подробнее здесь: https://stackoverflow.com/questions/798 ... e-there-is