Как можно заменить position: sticky, если бы его не было?

Question

Можно использовать position: fixed + JavaScript для динамического вычисления позиции элемента при скролле. Также можно применить IntersectionObserver для отслеживания положения элемента и переключения его стилей.

YeaHub · Accepted Answer

Использование position: fixed + JavaScriptЕсли sticky недоступен, можно имитировать его поведение:При скролле страницы вычислять, когда элемент должен "прилипнуть".Переключать position: relative → position: fixed при достижении границы.Пример:const stickyElement = document.querySelector('.sticky');
const offset = stickyElement.offsetTop;
window.addEventListener('scroll', () => {
	if (window.scrollY >= offset) {
		stickyElement.style.position = 'fixed';
		stickyElement.style.top = '0';
	} else {
		stickyElement.style.position = 'relative';
	}
});Использование IntersectionObserverБолее современный способ — отслеживать, когда элемент достигает границы:const observer = new IntersectionObserver(
  	(entries) => {
    		entries.forEach((entry) => {
      			if (entry.isIntersecting) {
        			entry.target.style.position = 'fixed';
        			entry.target.style.top = '0';
      			} else {
        			entry.target.style.position = 'relative';
      			}
    		});
  	},
  	{ threshold: 1 }
);

observer.observe(document.querySelector('.sticky'));Альтернатива с transform: translateYЕсли нужно плавное поведение, можно анимировать положение элемента:.sticky {
	position: relative;
	transition: transform 0.2s;
}
.sticky.fixed {
	transform: translateY(var(--scroll-offset));
}window.addEventListener('scroll', () => {
	const scrollY = window.scrollY;
	stickyElement.classList.toggle('fixed', scrollY > offset);
});