Артём Поликарпов
|
В светлом будущем у нас будет гибридное position:sticky, дающее возможность задать координаты, при которых блок выйдет из нормального потока и застынет на одном месте:
Сегодня это свойство не поддерживается ни в одном браузере, Хромиум 23.0.1247.0 с ключом |
|||||||
Остаётся Яваскрипт. Отслеживаем позицию блока относительно края браузера, вычитая позицию скрола из расстояния между блоком и краем страницы. Когда эта позиция достигает порогового значения, клонируем блок, скрываем, но не убираем из потока оригинал блока, а поверх показываем залипший благодаря position:fixed клон. Это не всё. Клону нужно скриптом сообщать ширину оригинального блока, потому что Если всё получится, будет не трудно добавить несколько строк и сделать А
В
Г
Д
Е
Ж
Пользуйтесь. Чтобы сделать простой залипающий блок, как сноска справа, добавьте класс stickyeah:
Настройте отступ до верха браузера атрибутом
Чтобы
Чтобы блоки отталкивали друг друга, как с именами выше, объедините их в группу по значению
На странице может быть несколько таких групп, задайте каждой свой идентификатор
В АйОСе слабая поддержка position:fixed — пересчёт стилей происходит только после отрыва пальца от экрана. |
Блок
<div class="stickyeah" data-stickyeah-offset="15" data-stickyeah-class="bordered"> остановится в 15 пикселях от края окна и получит класс bordered при остановке.
|
P. S. |