Stickyfill
Полифилл для position: sticky

Устаревшая фигня!
Полифилл хорошо поработал, пока браузеры внедряли поддержку position: sticky. Сейчас стики можно смело использовать без полифилла, все современные браузеры поддерживают их.

Стика — это такой блок, который прилипает к краю экрана, когда доскролливаешь до него. А когда доезжает до конца родительского блока — уезжает вместе с ним. Вот прям как этот параграф.

Код очень простой: 

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

top меняет отступ стики от края окна. Еще можно указать margin-bottom, чтобы стика останавливалась чуть раньше, чем обычно.

Проблема в том, что на данный момент стики поддерживаются только в Safari на Маках и на айОси.

Поэтому я написал Stickyfill. Он эмулирует стики там, где они не поддерживаются нативно.

Что умеет:

  • Работает со стиками, прилипающими к верхнему краю
  • Работает c ячейками таблицы Отключил, пока Фаерфокс не реализует это нативно
  • Работает в IE9+
  • Отключается в старых браузерах и в браузерах с нативной поддержкой стик
  • Эмулирует нативное поведение стик (там, где умеет)
  • Учитывает кучу разных кейсов

Что не умеет:

  • Не умеет левые, правые, нижние и комбинированные стики
  • Не «стыкует» табличные стики
  • Не работает во внутренних блоках со скроллом
  • Не парсит CSS (включается ручками)

Забрать с ГитХаба

За четыре дня погружения в ад блоковых моделей браузеров я узнал, чем отличаются window.pageYOffset, document.documentElement.scrollTop, window.scrollY и document.body.scrollTop, в чем расхождения offsetWidth у блока с box-sizing: border-box в разных браузерах, какая разница между element.offsetWidth и node.getBoundingClientRect().width, в чем разница между getComputedStyle(element) и реальными значениями, как посчитать ширину вьюпорта без ширины скролла и как ошибки округления любят накопиться в самый неподходящий момент.
Опубликовано