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

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

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

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

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

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

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

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

Неправильно

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

Правильно

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

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

Неправильно

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

Правильно

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

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

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

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

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