Анимирование основной навигации

Появление, изменения цвета или другие эффекты только с использованием CSS при прокрутки страницы:

position: sticky;
	top: -#{rem(80)};
	z-index: 1000;
	@supports (animation-timeline: view()) {
		animation: stickyNav linear forwards;
		animation-timeline: view();
		animation-range-start: 150dvh;
		animation-range-end: 180dvh;
	}
	
@keyframes stickyNav {
	100% {
		top: 0;
		background-color: var(--clr-black-300);
	}
}