-->

Закрепить блок при прокрутке (position: sticky;) | CSS примеры

Как работает position: sticky;

Элемент с position: sticky; фиксируется в рамках ближайшего родителя, когда достигает указанного в свойствах top, right, bottom, left значения до границы ближайшего прокручиваемого родителя. Размер элемента остаётся прежним. Соседние элементы не сдвигаются на освободившееся пространство.

1
2
3
Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 2em;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  margin: 2em;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: -2em;
  margin-bottom: -2em;
  padding-top: 2em;
}
.sticky div {
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div style="margin-bottom: -2em;"></div>
  <div class="sticky">
    <div></div>
  </div>
  <div style="margin-top: 2em;"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  transform: translate(0, 2em);
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
  padding: 2em;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
Прилипну к нижнему краю окна браузера, когда нижний край окна браузера будет ниже верхнего края ближайшего родителя, а нижний край элемента — выше своего первоначального расположения.
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  bottom: 0;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  <div class="sticky"></div>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
4
5
6
7
Прилипну то к нижнему краю окна браузера, то к верхнему
8
9
10
11
12
13
14
15
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  bottom: 0;  /* не рекомендуется для высоких элементов, так как на коротких устройствах он загородит собой информацию родителя */ 
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  4<br>
  5<br>
  6<br>
  7<br>
  <div class="sticky"></div>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Прилипну внутри блока, который можно проскроллить, а не к краю окна браузера
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  overflow: auto;  /* добавить полосу прокрутки */ 
  height: 10em;
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>

Почему не работает position: sticky;

Высота элемента с position: sticky; равна высоте ближайшего родителя

1
2
3
Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  overflow: auto;
  height: 10em;
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div>
    <div class="sticky"></div>
  </div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>

У не прокручиваемого родителя, стоящего внутри прокручиваемого, установлен overflow отличный от visible

1
2
3
Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  overflow: auto;
  height: 10em;
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3
  <div style="overflow: hidden;">
    <div class="sticky"></div>
    4<br>
    5<br>
    6<br>
    7<br>
    8<br>
    9<br>
    10<br>
    11<br>
    12<br>
    13<br>
    14<br>
    15<br>
  </div>
</div>

Не установлены свойства top, right, bottom, left

1
2
3
Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.raz {
  overflow: auto;
  height: 10em;
  border: 1px solid red;
}
.sticky {
  position: sticky;
  min-height: 2em;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="sticky"></div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>

Примеры

Как сделать плавающий блок на сайте: меню, баннер

<style>
header, nav, article, aside, footer {
  border: 1px solid gray;
}
header, nav, article, aside {
  margin-bottom: 1em;
}
article, footer {
  min-height: 100vh;
}
aside {
  min-height: 20vh;
}
@supports (display: grid) {
  @media (min-width: 20em) {
    body {
      display: grid;
      grid-template-columns: 1fr minmax(0, 40em) 1em minmax(0, 15em) 1fr;
      grid-template-rows: repeat(3, auto 1em) 1fr 1em auto;
    }
    header, nav, article, aside {
      margin: 0;
    }
    header, footer, nav {
      grid-column: 2/5;
    }
    nav {
      grid-row: 3/4;  
    }
    article {
      grid-column: 2/3;
      grid-row: 5/8;
    }
    [id^="right"] {
      grid-column: 4/5;
    }
    #right1 {
      grid-row: 5/6;
    }
    #right2 {
      grid-row: 7/8;
    }
    .sticky {
      position: sticky;
      top: 0;
    }
    footer {
      grid-row: 9/10;
    }
  }
}
</style>

<header>Название</header>
<nav>Меню</nav>
<article>Основная часть</article>
<div id="right2">
  <aside class="sticky">Прилипающая часть</aside>
</div>
<aside id="right1">Вспомогательная часть</aside>
<footer>Подвал</footer>

Как закрепить шапку HTML-таблицы

Название таблицы
Заголовок Заголовок Заголовок
Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка 
<style>
.raz {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;  /* в Mozilla Firefox не работает внутри таблицы */ 
  background: lightpink;
}
</style>

<table class="raz">
  <caption>Название таблицы</caption>
  <thead class="sticky">
    <tr>
       <th>Заголовок
       <th>Заголовок
       <th>Заголовок
  <tbody>
    <tr>
       <td>Ячейка
       <td>Ячейка
       <td>Ячейка
    <tr>
       <td>Ячейка
       <td>Ячейка
       <td>Ячейка
    <tr>
       <td>Ячейка
       <td>Ячейка
       <td>Ячейка
    <tr>
       <td>Ячейка
       <td>Ячейка
       <td>Ячейка
</table>

Как расположить HTML-картинки в одну строку с прикрепляющимся слева описанием

Поле ромашек
Поле ромашек
Отражение котёнка
Отражение котёнка
Медвежата у реки
Медвежата у реки
Весёлый паровозик
Весёлый паровозик
Планета Земля
Планета Земля 
<style>
.raz {
  overflow: auto;
  border: 1px solid red;
  white-space: nowrap;  /* не переносить на другую строку inline-элемент */ 
}
.raz figure {
  display: inline-flex;
  margin: 0;
}
.raz figcaption {
  position: sticky;
  left: 0;

  /* для IE */ 
  writing-mode: tb-rl;

  /* для Mozilla Firefox */ 
  width: 1em;
  padding: 1em;
  line-height: 1;

  writing-mode: vertical-rl;  /* перевернуть текст */ 
  text-align: center;  /* выравнять текст по середине */ 
  background: rgba(255,255,255,.9);
}
.raz img {
  height: 300px;
}
</style>

<div class="raz">
  <figure>
    <figcaption>Поле ромашек</figcaption>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrXhN4l8y6GPXGiRg0CAv1ySXdy3qihvCPRttwS-W0ntLqAtA7hiN_RkNZYmaLyMe-Cymu6NIks6sRbs8AkHDZadr-SL_Kh-H5LEo-aG_gcEAGfJRMV0fU-PqAoCVhJPde8EsWxMfUpK4/s450/romashki.jpg" alt="Поле ромашек">
  </figure><figure>
    <figcaption>Отражение котёнка</figcaption>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi28jLcbmHIGV1xHUjke9eyfp2zv0E2H4xEdZvss7MDQiJ7JtvdqTodjkk5QL8sDL7Zh1lMI1NhM3B9A40iGvWTZY35fgu7Mr1Ia1GdQ4UzK-mZnpo52s8f61TTg6ue0eklnabsh8TkMX_3/s300/mechty.jpg" alt="Отражение котёнка">
  </figure><figure>
    <figcaption>Медвежата у реки</figcaption>
    <img src="http://img-fotki.yandex.ru/get/4414/63641203.16/0_6c04a_2e684832_M" alt="Медвежата у реки">
  </figure><figure>
    <figcaption>Весёлый паровозик</figcaption>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiWCUqvIKX7YVofcRIGAShCU4JzOZBd1nSTrrZj5cTV3INTHgAXJfS4DiOgFikSyOJLJJlBhIau-8T6rJslFiEVvrltxqti9VTUtNwrhE7U3YICsWGEttOb9TDsQgDR74EfstPgTyjcvCm/s390/parovozik.jpg" alt="Весёлый паровозик">
  </figure>
  </figure><figure>
    <figcaption>Планета Земля</figcaption>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfu5x86wY8yl02A6R2F-JCZ1NSqg5ab6ziMKZc5z282Wy8mAB-ClEGboFJdfMIwsMZ887y-oYX8T1gACvjdoPrbLjxikAeZxcjNl_kMips4a8Ksi7dTGL9AEsWtXfXQHaMzdWdxsaJxkQL/s400/planeta.jpg" alt="Планета Земля">
  </figure>
</div>
в f t
наверх ↑

13 комментариев:

Kliwi
Спасибо, интересно.
А у @supports уже норм поддержка?
NMitra
Там с самого начала хорошо было. Если @supports не поддерживается, то браузер просто не сможет подгрузить развёрнутые стили. У сайта будет вид как для мобильных, а это не так уж плохо. Нужно только ширине сразу установить ограничение.
Kliwi
Понятно. Я бы с удовольствием убрал лишний скрипт, но странно, что весь из себя передовой Edge не поддерживает стики судя по CanIUse.
NMitra
Не думаю, что есть какие-то особенные удобства в том, что колонка перемещается. Поэтому я предусмотрела, чтобы её можно было закреплять. Ранее сравнивала и кликабельность рекламы. Но перемещающийся блок и близко не подошёл к блоку внутри основного содержимого.
Kliwi
Для меня весьма полезен, цтр РСЯ в плавающем сайдбаре почти вдвое выше, чем в обычном.
taratik
Нужна помощь по установке кода. В лс.
DyadyaGenya
Спасибо за подсказки и статью. До вас реально нигде про sticky не читал. Буду разбираться дальше
DyadyaGenya
Появился вопрос: есть ли способ заставить работать stiky в браузерах, которые его не поддерживают? Просто оказалось, что на мобилках он почти не работает, у меня завелся вроде только на мозиле.
Игорь
НЕплохо
NMitra
@media (min-width: 50em) { /* стили, когда область просмотра окна браузера больше 50 em */
@supports (position: sticky) { /* при поддержке sticky */
.sticky {
position: sticky;
top: 0;
}
}
}
Unknown
Очень крутой гайд, сделан с душой. Спасибо автору <3
Alex
Класс, надеюсь, оно работает о многих браузерах
NMitra
Спасибо! Теперь работает во всех последних браузерах

Отправить комментарий