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

Элемент с position: sticky; фиксируется в рамках ближайшего родителя, когда расстояние до границы ближайшего прокручиваемого родителя достигает указанного в свойствах top, right, bottom, left значения. На то, в каком месте элемент прикрепится и где отцепиться, также влияют свойства padding, margin и transform. Размещение элемента над другими элементами правится с помощью свойства z-index.

После того, как свойство position примет значение sticky, размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.

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;
  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 от верхнего края окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента на более чем на 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 {
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  background: lightpink;
}
.relative {
  position: relative;
  min-height: 6em;
  background: green;
}
</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>
  <div class="relative"></div>
  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;
  top: 0;
  z-index: 1;
  min-height: 2em;
  background: lightpink;
}
.relative {
  position: relative;
  min-height: 6em;
  background: green;
}
</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>
  <div class="relative"></div>
  10<br>
  11<br>
  12<br>
  13<br>
  14<br>
  15<br>
</div>
1
2
3
Cправа
4
5
6
7
8
9
10
11
12
<style>
.raz {
  position: relative;
  margin-right: 4em;
  border: 1px solid red;
}
.absolute {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  visibility: hidden;
}
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  visibility: visible;
  background: lightpink;
}
</style>

<div class="raz">
  1<br>
  2<br>
  3<br>
  <div class="absolute">
    <div class="sticky"></div>
  </div>
  4<br>
  5<br>
  6<br>
  7<br>
  8<br>
  9<br>
  10<br>
  11<br>
  12<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 имеют значение по умолчанию auto

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>

Примеры

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

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

<table class="raz">
  <caption>Название таблицы</caption>
  <thead>
    <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="http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s450/romashki.jpg" alt="Поле ромашек">
  </figure><figure>
    <figcaption>Отражение котёнка</figcaption>
    <img src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/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="http://4.bp.blogspot.com/-Nq5KPM8uNjk/UFbSS3v0Z5I/AAAAAAAADNQ/3MxRKB-jfqo/s390/parovozik.jpg" alt="Весёлый паровозик">
  </figure>
  </figure><figure>
    <figcaption>Планета Земля</figcaption>
    <img src="http://4.bp.blogspot.com/-nPTLkC1HEzU/UyhFH_hLSzI/AAAAAAAAERU/NvtlJ8yKYRk/s400/planeta.jpg" alt="Планета Земля">
  </figure>
</div>

Прилипающий блок CSS на jQuery

Прикрепляемый хедер к верху страницы при её прокручивании. Реализовано на jQuery.

HTML

<div id="container">
    
    <h2>Липкий хедер на jQuery</h2>
    
    <div id="header">
        <!-- липкий хедер -->
    </div>
    
    <div id="content">
        <!-- контент -->
    </div>
    
</div><!-- /container -->

CSS

Стиль для демки:

#container {
    width: 960px;
    margin: 5em auto;
    text-align: left;
}
 
#header{
    width:958px;
    border:1px solid #ebebee;
    border-bottom:3px solid #ddd;
    background-image: -webkit-linear-gradient(top, #fff, #ebebee);
    background-image:    -moz-linear-gradient(top, #fff, #ebebee);
    background-image:     -ms-linear-gradient(top, #fff, #ebebee);
    background-image:      -o-linear-gradient(top, #fff, #ebebee);
    background-image:         linear-gradient(top, #fff, #ebebee);
}
 
#content{
    padding:10px;
    border:1px solid #e8e8e8;
    border-bottom:3px solid #e8e8e8;
    border-top: none;
    border-radius:4px;
    background:#fcfcfc;
    margin:20px 0;
}

JS

Подключаем jQuery и сам код прикрепления:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/jаvascript"></script>
<script type="text/jаvascript">
    $(document).ready(function(){
        var HeaderTop = $('#header').offset().top;
        
        $(window).scroll(function(){
                if( $(window).scrollTop() > HeaderTop ) {
                        $('#header').css({position: 'fixed', top: '0px'});
                } else {
                        $('#header').css({position: 'static'});
                }
        });
    });
</script>