x
 
↑
Январь
3 •
•
•

2 •
•
↓
Фёдор Уткин
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.
Типовые решения в вёрстке. Как сверстать гамбургерное меню Рецепт: бегущая строка на сайте без Яваскрипта 2 • Как правильно работать с начертаниями подключаемого шрифта в ЦСС? Что дизайнеру стоит знать о якорных ссылках?




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

Через квартал позвонил заказчик и спросил, может ли он использовать одну из непринятых концепций 4 • Есть ли какой-нибудь метод отбора фотографий, если наснимала 100500, а надо выбрать 5? 2 • Диаграмма футбольных трансферов. Результат 5 • 1 •