позиция: Sticky снова в Chrome

Пол Кинлан

Четыре года назад Эрик Бидельман создал довольно удивительный пост в блоге о том, что position: sticky попал в WebKit , который в то время был движком, на котором работал Chrome (а также многие другие браузеры, включая Safari). Год спустя, и к большому ужасу веб-разработчиков, мы удалили position:sticky из Chrome, потому что «текущая реализация не разработана таким образом, чтобы хорошо интегрироваться с существующей системой прокрутки и компоновки».

Мы всегда хотели вернуть его в Chrome, поскольку ошибка гласила: «Как только мы приведем в порядок наш прокрутку и компоновку, нам следует вернуться к position: sticky и реализовать функцию таким образом, чтобы она хорошо интегрировалась с остальной частью движка». Мета-ошибка , отслеживающая реализацию, работала с 2013 года.

Отличная новость заключается в том, что начиная с Chrome 56 (бета-версия по состоянию на декабрь 2016 г., стабильная версия по состоянию на январь 2017 г.) position: sticky теперь снова доступна в Chrome.

Что такое position:sticky?

Потребовалось некоторое время, чтобы добраться сюда, так почему же я так этому рад?

position:sticky — это атрибут позиционирования CSS, который позволяет вам закрепить элемент в области просмотра (т. е. прикрепить его к верхней части экрана), но только когда его родительский элемент виден в области просмотра и находится в пределах порогового значения. Если он не закреплен в области просмотра, элемент будет вести себя так, как будто у него position: relative . Это очень хорошее и простое дополнение к платформе, которое устраняет необходимость использовать JavaScript в обработчике событий onscroll только для того, чтобы закрепить элемент в верхней части области просмотра.

Вот как это выглядит в моем блоге . Это позволяет мне держать заголовок текущего раздела вверху экрана, пока вы читаете мои довольно длинные и трудоемкие статьи :\

Чтобы реализовать эту функцию, укажите, что атрибут position должен иметь значение sticky на элементе, который вы хотите, чтобы он был, э-э, застрял. Кроме того, вы также можете добавить смещение в том месте, где он должен быть застрял.

    h3 {
      /* Element will be 'fixed' when it ... */
      position: sticky;
      /* ... is 10px from the top of the viewport */
      top: 10px;
    }

Предыдущий пример зафиксирует элемент <h3> на 10px от верха области просмотра. Чтобы зафиксировать его непосредственно в верхней части области просмотра, нужно задать атрибут top как top: 0px .

Поддержка этой функции довольно сильная. Она доступна в Chrome (ура), Firefox и Safari. Вот более подробная информация о position:sticky :