NextJS позволяет избежать задержки при изменении цвета элементов панели навигации при прокрутке ⇐ CSS

[Anonymous]

Этот код изменяет цвет элементов панели навигации после 1020 пикселей (экран 1080 пикселей) ниже, и если панель навигации появляется на другой странице, однако при переходе на другую страницу происходит задержка в изменении цветов панели навигации, пока я не начну прокручивать, можно ли это исправить или заставить работать по-другому?

Вот видео, демонстрирующее это:

Codesandbox: https://codesandbox.io/p/sandbox/hotel- ... %3A12%2C13

'использовать клиент' импортировать изображение из «next/image» импортировать ссылку из «next/link» импортировать контейнер из «../Container» импорт {useState, useEffect, useCallback} из «реагировать»; импортировать {useRouter} из «следующего/навигации»; const Navbar = () => { const [цвет, setColor] = useState(false) constchangeColor = useCallback(() => { if (window.scrollY >= 950 || window.location.pathname.includes('/lodge')) { УстановитьЦвет (истина); } еще { установитьЦвет (ложь); } }, []); useEffect(() => { изменить цвет(); window.addEventListener('scroll',changeColor); возврат () => { window.removeEventListener('scroll',changeColor); }; }, []); const [изображение, setImage] = useState(false) constchangeImage = useCallback(() => { if (window.scrollY >= 950 || window.location.pathname.includes('/lodge')) { setImage (истина); } еще { setImage (ложь); } }, []); useEffect(() => { изменитьИзображение(); window.addEventListener('scroll', ChangeImage); возврат () => { window.removeEventListener('scroll', ChangeImage); }; }, []); возвращаться ( {изображение ? ( ) : ( )} ЛОДЖ НАШ БЛОГ {изображение ? ( ) : ( )} НОМЕР RU | ES ) } экспортировать навигационную панель по умолчанию; Проблема все еще не решена