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.

clip-path — обрезка по фигуре в ЦСС Как проверять соответствие сайта макету в 2024? Какие есть аналоги PixelPerfect? Ошибки вложенности в ХТМЛ 1 Откуда берётся отступ под картинкой и как его убрать? 1




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

Всё просто 2 Как правильно писать диапазон дат? 2 1 Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1