мне сейчас тоже пришлось найти альтернативное решение вместо position: sticky; , но у меня причина была в том, что по не вполне понятной мне причине главный wrapper-контейнер на странице имеет overflow: hidden, а при этом как известно position: sticky просто не работает. Непонятно почему, при изменении значения overflow на visible на маленьких разрешениях, мобильных, начинает плыть, размывается текст и контент съезжает в левую сторону, оставляя справа пустое пространство. Ставишь hidden - все четко и ровно.
Знаю про решение с clip-path - да только конкретно мою проблему с размытием не решает.
Остановился на простейшем нативном скрипте, в моем случае закрепляю хидер вверху страницы, когда небольшая по высоте плашка над хидером с не особо важной информацией проскролится.
window.onscroll = function() {fixTop()};
var header = document.getElementById("page-header");
function fixTop() {
if (window.pageYOffset > 33) { // 33px - высота "плашки"
header.classList.add("sticky-header");
}
else {
header.classList.remove("sticky-header");
}
}
думаю все понятно, дать добавленному классу для хидера fixed и все.