x
 
Игорь
20 июня 2013

Артём, как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера и отлипал, когда скролишь обратно?



В светлом будущем у нас будет гибридное position:sticky, дающее возможность задать координаты, при которых блок выйдет из нормального потока и застынет на одном месте:

.sticky {
  position: sticky;
  top: 15px;
}

Сегодня это свойство не поддерживается ни в одном браузере, Хромиум 23.0.1247.0 с ключом enable-experimental-webkit-features не в счёт.

Остаётся Яваскрипт. Отслеживаем позицию блока относительно края браузера, вычитая позицию скрола из расстояния между блоком и краем страницы. Когда эта позиция достигает порогового значения, клонируем блок, скрываем, но не убираем из потока оригинал блока, а поверх показываем залипший благодаря position:fixed клон.

Это не всё. Клону нужно скриптом сообщать ширину оригинального блока, потому что фиксед-блок выпадает из контекста и определяет свои размеры относительно окна, а не блока-родителя. И ещё нужно не забыть про горизонтальную ось, чтобы если вдруг появится горизонтальная прокрутка, залипший блок двигался влево-вправо за своей колонкой.

Если всё получится, будет не трудно добавить несколько строк и сделать что-то вроде айфоновского тейбл-вью, когда один блок отталкивает другой:

А

  • Алевтина
  • Александра
  • Алёна
  • Алина
  • Алиса
  • Алия
  • Алла
  • Алсу
  • Альбина
  • Анастасия
  • Ангелина
  • Анжелика
  • Анна
  • Антонина
  • Арина
  • Ася

В

  • Валентина
  • Валерия
  • Варвара
  • Василиса
  • Вера
  • Вероника
  • Виктория
  • Виолетта
  • Виталия
  • Владислава

Г

  • Галина
  • Гузель
  • Гульнара

Д

  • Дана
  • Дарья
  • Диана
  • Дина
  • Динара

Е

  • Ева
  • Евгения
  • Екатерина
  • Елена
  • Елизавета

Ж

  • Жанна


Моя версия скрипта:

Пользуйтесь. Чтобы сделать простой залипающий блок, как сноска справа, добавьте класс stickyeah:

<div class="stickyeah">
  <h2>Всё</h2>
  <p>Что угодно.</p>
</div>

Настройте отступ до верха браузера атрибутом data-stickyeah-offset:

<div class="stickyeah"
     data-stickyeah-offset="40">
</div>

Чтобы как-то изменить внешний вид залипшего блока, укажите любой класс в data-stickyeah-class:

<style>
  .zalip {
    color: pink;
  }
</style>

<div class="stickyeah"
     data-stickyeah-class="zalip">
</div>

Чтобы блоки отталкивали друг друга, как с именами выше, объедините их в группу по значению data-stickyeah-push:

<h2 class="stickyeah"
    data-stickyeah-push="h2">
  Заголовок
</h2>
<p>Абзац!</p>
<h2 class="stickyeah"
    data-stickyeah-push="h2">
  Ещё один
</h2>

На странице может быть несколько таких групп, задайте каждой свой идентификатор data-stickyeah-push.


Если position:fixed не поддерживается, его можно эмулировать через position:absolute и дополнительную арифметику. Но я решил не утяжелять свой сценарий, залипание — вспомогательная опция, не влияющая на доступность контента и возможность совершить покупку.

В АйОСе слабая поддержка position:fixed — пересчёт стилей происходит только после отрыва пальца от экрана.

Блок <div class="stickyeah" data-stickyeah-offset="15" data-stickyeah-class="bordered"> остановится в 15 пикселях от края окна и получит класс bordered при остановке.

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Александр Журавский
21 июня 2013

В Хроме, под Виндой, ползунок в полосе прокрутки сходит с ума.

Денис Талала
25 июня 2013

Артём, спасибо большое за скрипт. Можно ли сделать так, чтобы блоки залипали ещё и внизу окна браузера?

Борис Котт
26 июня 2013

А в чём смысл создавать фиксированную копию? Можно же и просто исходный элемент зафиксировать.

Вадим Юмадилов
7 декабря 2013

Борис, если фиксировать исходный элемент, то страница будет прыгать вверх на высоту элемента.

Атон Вознесенский
24 сентября 2014

Удобнее воспользоваться решением из bootstrap http://getbootstrap.com/javascript/#affix — нет необходимости создавать копию блока.


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

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сайты для слабовидящих 2 За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере? 1