Использование position:sticky в CSS

0 0

На самом деле эта проблема не в чем-то глючном или неправильном. Фактически, это эффект поведения CSS по умолчанию. Почему и как? Посмотрим на следующий пример.

<div class=”wrapper”> <aside></aside> <main></main> </div>

1234<div class=”wrapper”>    <aside></aside>    <main></main></div>

Использование position:sticky в CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

CSS .wrapper { display: grid; grid-template-columns: 250px minmax(10px, 1fr); grid-gap: 1rem; }

12345.wrapper {    display: grid;    grid-template-columns: 250px minmax(10px, 1fr);    grid-gap: 1rem;}

У нас есть сетка с контейнером внутни шириной 250px, а остальное доступное пространство предназначено для основной секции. Все просто, правда?

Использование position:sticky в CSS

Теперь мы хотим добавить position:sticky к элементу aside, чтобы зафиксировать его при прокрутке.

CSS aside { position: sticky; top: 0; }

1234aside {    position: sticky;    top: 0;}

Ой. Это не работает? Почему? Давайте разберемся.

Поведение элементов по умолчанию при align-items

Добавление фона к элементу aside покажет, что его высота равна высоте основной части.

Использование position:sticky в CSS

По умолчанию свойство align-items равно stretch. В результате столбец растянется по высоте, чтобы соответствовать самому большому столбцу в сетке.

Позвольте мне показать вам еще один пример, который поможет лучше проиллюстрировать проблему. У нас есть простой контейнер-сетка.

Использование position:sticky в CSS

CSS .cards__list { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem; }

12345.cards__list {    display: grid;    grid-template-columns: 1fr 1fr 1fr;    grid-gap: 1rem;}

По умолчанию карты растягиваются, чтобы соответствовать самой большой карте (первая справа). Чтобы переопределить это поведение, нам нужно изменить значение align-items установив ему значение start.

CSS .cards__list { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem; align-items: start; }

123456.cards__list {    display: grid;    grid-template-columns: 1fr 1fr 1fr;    grid-gap: 1rem;    align-items: start;}

Использование position:sticky в CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Использование position:sticky в CSS

Вернемся к исходному примеру. Чтобы показать проблему, я добавил фон в раздел aside. Попробуйте использовать checkbox в следующей демонстрации и обратите внимание, как изменяется высота боковой панели.

Нам нужно переопределить поведение по умолчанию для параметра stretch; и сделать высоту карты равной содержимому. Мы можем использовать align-self для элемента aside:

CSS aside { align-self: start; }

123aside {    align-self: start;}

Или использовать align-items для родительского элемента, что повлияет на все дочерние элементы.

CSS .wrapper { display: grid; grid-template-columns: 250px minmax(10px, 1fr); grid-gap: 1rem; align-items: start; }

123456.wrapper {    display: grid;    grid-template-columns: 250px minmax(10px, 1fr);    grid-gap: 1rem;    align-items: start;}

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

Другой пример

Очень похожий пример, который может иметь такое же поведение по умолчанию для сетки CSS, — это страница списка команды.

Использование position:sticky в CSS

При прокрутке мы хотим, чтобы «Дизайн» оставался неизменным. Без использования align-self: start страница не будет отображаться должным образом.

CSS .section { display: grid; grid-template-columns: 100px 1fr; grid-gap: 2rem; } .section__headline { position: sticky; top: 1rem; align-self: start; }

1234567891011.section {    display: grid;    grid-template-columns: 100px 1fr;    grid-gap: 2rem;} .section__headline {    position: sticky;    top: 1rem;    align-self: start;}

Заключение

В этой статье я привел пример функции CSS, от которой мы, разработчики, можем получить преимущество в некоторых случаях и переопределить другое значение.

Автор: Ahmad Shadeed

Источник: webformyself.com

Оставьте ответ