Свойство css position:sticky не работает. Почему?

Блог Просмотров: 78

CSS свойство position:sticky действительно может быть очень полезным! С его помощью можно за несколько строк css сделать "прилипающий" блок, это действительно очень просто и удобно!

Еще несколько лет назад стоило серьезно задуматься о его поддержке браузерами. Но время не стоит на месте, а хорошие и удобные технологии быстро "приживаются". Вопрос поддержки все еще актуален, но уже совсем не так остро.

Нужно учитывать, что position:sticky не будет работать, если хотя бы у одного из родительских элементов задано свойство overflow 

  • overflow: hidden
  • overflow: scroll
  • overflow: 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

Печать   E-mail