CSS свойство position:sticky действительно может быть очень полезным! С его помощью можно за несколько строк css сделать "прилипающий" блок, это действительно очень просто и удобно!
Еще несколько лет назад стоило серьезно задуматься о его поддержке браузерами. Но время не стоит на месте, а хорошие и удобные технологии быстро "приживаются". Вопрос поддержки все еще актуален, но уже совсем не так остро.
Нужно учитывать, что position:sticky не будет работать, если хотя бы у одного из родительских элементов задано свойство overflow
overflow: hiddenoverflow: scrolloverflow: auto
Конечно, причины могут быть разными, но если не работает position: sticky, то стоит проверить свойство overflow у родительских элементов. Можно глянуть вручную в консоли, либо использовать скрипт:
let parent = document.querySelector( '.sticky-sidebar' ).parentElement; while (parent) { const hasOverflow = getComputedStyle(parent).overflow; if( 'visible' !== hasOverflow) { console.log( hasOverflow, parent ); } parent = parent.parentElement; }
Скрипт выведет в console.log блоки с overflow.
Источник: https://misha.agency/css/pochemu-position-sticky-ne-rabotaet.html
