Залипающие элементы

Залипающие элементы могут быть двух типов:

Залипающие — элементы были в потоке, но потом зафиксировались, например шапка таблицы.

Островки — сразу были не в потоке, например, виджет поддержки. Или появились в ответ на действия пользователя, например, плашка с массовыми действиями.

Фиксируйте только то, что нужно. 1–2 элементов достаточно.

У таблиц может залипать шапка и подвал. В шапке названия столбцов и включенные фильтры с сортировкой, а в подвале бывает сводная информация.

Если в таблице легко ориентироваться: контент понятный и сводной информации нет, заголовок и подвал можно не фиксировать.

Залипающие элементы не должны мешать работать с контентом и превосходить его по приоритету на экране.

Неправильно

В этом примере залипшая шапка у таблицы слишком высокая, на 13-дюймовых экранах помещается всего 2–3 строчки таблицы

Правильно

Зафиксирована только шапка таблицы

Элементы не должны залипать, если в этом нет необходимости.

Неправильно

На это примере, кроме кнопки, залип подвал

Правильно

А тут подвал не залип и рабочая зона стала больше

Добавьте охранное поле в 5px. Оно не чувствительное к нажатию, это позволит случайно не нажать на элемент под островком.

Минимизируйте движения при скролле. Лишняя анимация отвлекает, раздражает и снижает ощущение контроля происходящего на страницы.

Залипшие элементы фиксируются с плашкой на фоне и при этом:

• у плашки нет тени,
• линии, отделяющие шапку и подвал становятся чуть шире контента.