x
 
Фёдор Уткин
18 января 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как сделана залипающая кнопка на странице книжной полки? Я понимаю, что это сделано с помощью position: sticky, но непонятно, как в конце кнопка встаёт на место.


Position: sticky позволяет закрепить блок при прокрутке, но при этом он не может находиться за пределами своего родителя.

Чтобы кнопка залипла на экране, установим свойство position в значение sticky и с помощью top/right/bottom/left зададим расстояние от края окна, на котором кнопка должна залипнуть:

.button {
  /* Сафари поддерживает только
  значение с префиксом */
  position: -webkit-sticky;
  position: sticky;

  /* Кнопка залипнет в 10пк
  от верха окна браузера */
  top: 10px;
}

Чтобы кнопка прилипла к нижней границе экрана, поменяем свойство top на bottom и выровняем кнопку вниз:

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.button {
  position: -webkit-sticky;
  position: sticky;

  /* Кнопка залипнет в 50пк
  от низа окна браузера */
  bottom: 50px;
}

Чтобы кнопка отлипла в нужный нам момент, поместим её в контейнер с ограниченной высотой. Когда контейнер уползёт за границы экрана, он «утащит» за собой кнопку, так как стики-элемент не может выпадать за пределы родительского блока:

.container {
  position: absolute;
  height: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.button {
  position: -webkit-sticky;
  position: sticky;
  bottom: 100px;
}

Position: sticky поддерживается всеми современными браузерами. Если вам нужна поддержка старых браузеров, возьмите полифилл: stickyfill

Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор закрыт. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

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

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

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

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

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

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




Недавно всплыло

На основе ролика о распознавании инсульта создан плакат. Вторая часть 1 2 3 2