6.1 position: sticky
Липкое позиционирование (position: sticky) в CSS сочетает в себе свойства относительного и фиксированного позиционирования. Элементы с липким позиционированием ведут себя как относительно позиционированные до тех пор, пока не достигают заданного порога прокрутки, после чего они становятся фиксированными.
Особенности липкого позиционирования:
- Элемент с
position: stickyведет себя как относительно позиционированный до тех пор, пока не достигает определенной позиции прокрутки - После достижения заданного порога элемент становится фиксированным и остается на месте до тех пор, пока не будет превышен другой порог прокрутки
- Липкое позиционирование работает только в пределах родительского контейнера. Когда родительский контейнер выходит за границы области просмотра, липкий элемент теряет свои фиксированные свойства
Синтаксис липкого позиционирования
Для применения липкого позиционирования используются свойства position: sticky и координаты top, right, bottom или left для определения порога прокрутки.
.element {
position: sticky;
top: value;
right: value;
bottom: value;
left: value;
}
Где:
top: расстояние от верхнего края окна браузера до верхнего края элементаright: расстояние от правого края окна браузера до правого края элементаbottom: расстояние от нижнего края окна браузера до нижнего края элементаleft: расстояние от левого края окна браузера до левого края элемента
Пример:
CSS
.wrapper {
height: 200px;
overflow: auto;
}
.header {
position: sticky;
top: 0;
background-color: deepskyblue;
padding: 10px;
font-size: 24px;
color: white;
}
.content {
margin-top: 25px;
background-color: lightgrey;
padding: 20px;
}
HTML
<div class="wrapper">
<div class="header">Sticky Header</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
В этом примере заголовок с классом .header будет оставаться на месте при прокрутке страницы, пока его верхний край не достигнет верхнего края окна просмотра.
6.2 Плюсы и минусы липкого позиционирования
Плюсы липкого позиционирования
- Улучшение пользовательского интерфейса:
- Липкие элементы, такие как заголовки, навигационные панели и боковые панели, улучшают навигацию и доступность контента на длинных страницах, оставаясь видимыми для пользователя
- Сочетание преимуществ относительного и фиксированного позиционирования:
- Липкое позиционирование позволяет элементам оставаться в потоке документа, сохраняя их относительное положение, пока не будет достигнут порог прокрутки. Это обеспечивает более естественное поведение элементов
- Простота реализации:
- Липкое позиционирование легко реализовать с минимальным количеством кода и без необходимости использования JavaScript
Минусы липкого позиционирования
- Ограниченная поддержка в старых браузерах:
- Липкое позиционирование поддерживается большинством современных браузеров, но может не работать в старых версиях браузеров, что может потребовать дополнительных решений для совместимости
- Зависимость от родительских контейнеров:
- Липкое позиционирование работает только в пределах родительского контейнера. Если родительский контейнер выходит за границы области просмотра, липкий элемент теряет свои фиксированные свойства
- Проблемы с перекрытием контента:
- Липкие элементы могут перекрывать другие элементы на странице, если их высота или ширина не учитываются при проектировании макета
6.3 Примеры использования липкого позиционирования
1. Липкая боковая панель
Создание липкой боковой панели, которая остается видимой при прокрутке контента.
CSS
.wrapper {
height: 200px;
overflow: auto;
}
.container {
display: flex;
}
.sidebar {
position: sticky;
top: 0;
left: 0;
width: 200px;
height: 100px;
background-color: lightgreen;
padding: 10px;
}
.content {
background-color: lightgrey;
padding: 20px;
}
HTML
<div class="wrapper">
<div class="container">
<div class="sidebar">Sticky Sidebar</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
</div>
В этом примере боковая панель с классом .sidebar будет оставаться на месте при прокрутке контента.
2. Липкий заголовок таблицы
Создание липкого заголовка таблицы, который остается видимым при прокрутке большого объема данных.
CSS
.wrapper {
height: 200px;
overflow: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
th {
position: sticky;
top: 0;
background-color: deepskyblue;
color: white;
}
tbody {
min-height: 300px;
display: block;
}
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
HTML
<div class="wrapper">
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
</tbody>
</table>
</div>
В этом примере заголовок таблицы будет оставаться на месте при прокрутке содержимого таблицы.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ