Как плавно переходить между абсолютными и фиксированными позициями на панели навигации во время прокрутки? ⇐ CSS

[Anonymous]

Я пытаюсь реализовать панель навигации, которая переключается с позиции: абсолютное на позицию: исправлено, когда пользователь прокручивает страницу вниз более чем на 160 пикселей. Моя цель — добиться плавного перехода между этими двумя состояниями, но я изо всех сил пытаюсь заставить его работать так, как я ожидаю.
В настоящее время переход между абсолютным и фиксированным происходит внезапно, и я не могу сделать переход плавным, поскольку CSS не позволяет анимировать свойство позиции.
Вот что я пробовал до сих пор:
.navbar-absolute {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
transition: all 0.5s ease;
background-color: rgba(255, 255, 255, 0.76); /* Semi-transparent background */
box-shadow: none;
opacity: 0.9;
}

.navbar-fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
background-color: rgb(255, 255, 255); /* Solid white background */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow when scrolling */
opacity: 1;
}

JS:
let lastScrollTop = 0;
const navbar = document.querySelector('.navbar');

window.addEventListener('scroll', function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (scrollTop === 0) {
navbar.classList.remove('navbar-fixed');
navbar.classList.add('navbar-sticky');
} else if (scrollTop > 160 && scrollTop > lastScrollTop) {
navbar.classList.remove('navbar-sticky');
navbar.classList.add('navbar-fixed');
}
});


Подробнее здесь: https://stackoverflow.com/questions/791 ... avbar-duri