Почему не работает position sticky
Перейти к содержимому

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

  • автор:

Как на са­мом деле ра­бо­та­ет position: sticky в CSS

У position: sticky уже очень неплохая браузерная поддержка, но большинство разработчиков так и не используют это свойство.

У этого есть две основные причины: во-первых, браузерам потребовалось много времени на реализацию адекватной поддержки этого свойства. И все просто успели забыть о нём.

Во-вторых, многие разработчики до конца не понимают логику, по которой это свойство работает. И тут появляюсь я!

Я полагаю, что вы хорошо знакомы с позиционированием в CSS, но давайте кратко повторим основные моменты:

Ещё три года назад существовало четыре типа позиционирования: static , relative , absolute и fixed .

Основное различие между static и relative , absolute и fixed в том, какое место они занимают в потоке документа (DOM). Элементы с позицией static и relative сохраняют своё естественное положение в потоке документа, в то время как absolute и fixed «вырываются» из потока документа и становятся плавающими.

Новое значение sticky похоже на все предыдущие значения сразу. Я проиллюстрирую это чуть позже.

Моё первое знакомство с «липким» позиционированием Скопировать ссылку

Думаю, что большинство из вас игрались с «липким» позиционированием. Так было и у меня, пока в один момент я не осознал, что совсем не понимаю это свойство.

При первом знакомстве с position: sticky все быстро понимают, что элемент залипает, когда область просмотра достигает определённой позиции.

.some-component

Проблема в том, что иногда это работает, а иногда нет. Когда всё работает, то элемент и правда залипает. Но когда не работает, то при прокрутке элемент перестаёт залипать. Как человеку, который живёт одним только CSS, мне было важно разобраться в сути проблемы. Именно поэтому я решил тщательно изучить «липкое» позиционирование.

«Липкая» разведка Скопировать ссылку

Во время своих экспериментов я заметил, что если элемент с position: sticky является единственным ребёнком своего родителя-обёртки, то этот «липкий» элемент не залипает.

  .sticky 
Некий контент

Когда я добавлял больше элементов внутрь родителя-обёртки всё начинало работать как ожидалось.

Почему так происходит?

Причина кроется в том, что элемент с position: sticky может перемещаться только в пределах контейнера, в котором находится. А поскольку в моём случае он был единственным ребёнком, у него не было элементов-братьев, поверх которых он мог перемещаться.

Как на самом деле работает position: sticky в CSS Скопировать ссылку

«Липкое» позиционирование состоит из двух основных частей: «липкого» элемента и «липкого» контейнера.

«Липкий» элемент — это элемент, которому мы задали position: sticky . Элемент будет становиться плавающим, как только область видимости достигнет определённой позиции, например top: 0px .

.some-component

«Липкий» контейнер — это HTML-элемент, который оборачивает «липкий» элемент. Это максимальная область, в которой может перемещаться наш элемент.

Когда вы задаёте элементу position: sticky , его родитель автоматически становится «липким» контейнером! Очень важно это запомнить! Контейнер будет являться областью видимости для элемента. «Липкий» элемент не может выйти за пределы своего «липкого» контейнера.

В этом причина, почему в предыдущем примере «липкий» элемент не залипал: он был единственным дочерним элементом контейнера.

В заключение Скопировать ссылку

Вот и всё. Я надеюсь, что вам понравилась эта статья и мне удалось поделиться своим опытом. Я буду признателен, если вы поделитесь этим постом и поаплодируйте.

Другие мои посты о CSS Скопировать ссылку

  • New CSS Logical Properties!
  • Becoming a CSS Grid Ninja!
  • The New Responsive Design Evolution
  • The Best Way to RTL Websites with Sass!
  • CSS Architecture for Multiple Websites With Sass

position: sticky НЕ работает

Наверняка Вы уже знаете о таком значении свойства position в CSS, как sticky . Но как у начинающих, так и у продвинутых верстальщиков, оно вызывает массу вопросов. Одним из основных является то, как именно работает это и при каких условиях.

Для справки: position: sticky – это одно из новых значений свойства position , которое позволяет элементам прилипать к необходимой части экрана, во время прокрутки страницы. И не надо никакого JS. Данное значение свойства позволяет использовать удобные и простые навигационные и информационные элементы, не прибегая к использованию JS кода.

Как работает это значение, Вы наверняка знаете, но я все же напомню.

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

Чтобы пользователь мог видеть заголовок при прокрутке странице, и не забывал о чем идет речь, при изучении длинного текста (возможно с видео/изображениями), логично представить, что расположив элемент вверху экрана, он как нельзя лучше даст понять о чем идет речь и позволит хоть немного улучшить UX страницы.


1 Lorem ipsum dolor sit amet.



Lorem ipsum dolor sit amet, consectetur adipisicing.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi deserunt facilis incidunt labore maxime quia totam? Commodi deleniti et minima nostrum nulla numquam quaerat quod?


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad aliquam aperiam assumenda consequatur dignissimos dolorem enim, excepturi fugiat inventore ipsam nemo nesciunt, nisi non provident quo saepe sapiente suscipit, vel voluptatum. Libero, pariatur sequi. Commodi debitis earum, expedita id libero magni neque nulla numquam pariatur quam quibusdam, repellat repellendus sunt ullam vero voluptas voluptatum?






2 Lorem ipsum dolor sit amet, consectetur adipisicing elit.



Lorem ipsum dolor sit.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque esse eum illo molestias nam nobis non officia perspiciatis velit, voluptas.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic nisi quod quos sint veniam! Aspernatur assumenda aut autem, consectetur deserunt dicta eius fugiat itaque laboriosam molestias odio quas quidem quisquam, quos rem similique unde voluptatum?


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita non perspiciatis voluptates? Incidunt, ratione, reprehenderit? At beatae ea esse ipsum iusto maxime officia repudiandae, temporibus? Consequuntur deserunt dicta, doloremque dolorum ea eveniet modi neque non, nulla officiis porro repellendus sit temporibus unde velit! Aliquam, perferendis?






3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, illo.



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam eligendi iste qui, quidem reiciendis sit!


Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis dicta ducimus expedita fugit, illum in ipsum laudantium, magnam minima molestias nam, natus nobis non nostrum pariatur praesentium provident quidem quo recusandae reiciendis repudiandae sequi tempore vero vitae? Expedita id ipsam minus sequi? Aperiam atque eaque error minus, tempora voluptas voluptates voluptatibus. Ab ad animi autem ipsam magnam nesciunt quia unde. Consequatur eos laborum pariatur unde veritatis! A debitis doloribus facilis natus nemo saepe veritatis.



body 
sectionposition:relative;padding:40px 10px;margin:5px 0;border:1px solid #999>
h2position:sticky;top:0;background:rgba(255,0,0,.5)>
article
header,footer
footer

Важно задать РОДИТЕЛЬСКОМУ элементу position: relative , дочернему элементу: position: sticky; top: 0 >> элемент прилипнет к верху страницы, если задать bottom: 0 , то, соответственно, к низу.

САМОЕ ГЛАВНОЕ!

Для html , body НЕ ДОЛЖНО использоваться свойство overflow: hidden или overflow-x: hidden . Иначе, position: sticky НЕ сработает вообще .

ТАКЖЕ position: sticky не работает, если использовать новое свойство CSS — backdrop-filter . То есть, родительский контейнер НЕ должен иметь это свойство. Или же тот контейнер, на котором возникает полоса прокрутки.

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

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

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

Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Прилипну, сделав отступ в -2em от верхнего края окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента на более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.

4
5
6
7
8
9
10
11
12
13
14
15

 .raz < border: 1px solid red; >.sticky < position: sticky; top: -2em; margin-bottom: -2em; padding-top: 2em; > .sticky div 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1
2
3
4
5
6
7
8
9
10
11
12

Прилипну к нижнему краю окна браузера, когда нижний край окна браузера будет ниже верхнего края ближайшего родителя, а нижний край элемента — выше своего первоначального расположения.

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1
2
3
4
5
6
7
Прилипну то к нижнему краю окна браузера, то к верхнему
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Буду показан под зелёным блоком.
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < border: 1px solid red; >.sticky < position: sticky; top: 0; min-height: 2em; background: lightpink; >.relative 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Буду показан над зелёным блоком.
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < border: 1px solid red; >.sticky < position: sticky; top: 0; z-index: 1; min-height: 2em; background: lightpink; > .relative 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4
5
6
7
8
9
10
11
12

  1 
2
3
4
5
6
7
8
9
10
11
12

Прилипну внутри блока, который можно проскроллить, а не к краю окна браузера
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < overflow: auto; /* добавить полосу прокрутки */ height: 10em; border: 1px solid red; > .sticky 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < overflow: auto; height: 10em; border: 1px solid red; >.sticky 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Достигнуто конечное положение

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Не прилипну

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < overflow: auto; height: 10em; border: 1px solid red; >.sticky 
1
2
3 4
5
6
7
8
9
10
11
12
13
14
15

Все четыре свойства top , right , bottom , left имеют значение по умолчанию auto

Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < overflow: auto; height: 10em; border: 1px solid red; >.sticky 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Примеры

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

  
Название
Основная часть
Подвал

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

    Заголовок Заголовок Заголовок  Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка
Название таблицы

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

Поле ромашекОтражение котёнкаМедвежата у рекиВесёлый паровозик Планета Земля

 .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 
Поле ромашек
Поле ромашек
Отражение котёнка
Отражение котёнка
Медвежата у реки
Медвежата у реки
Весёлый паровозик
Весёлый паровозик
Планета Земля
Планета Земля

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

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

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

Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Прилипну, сделав отступ в -2em от верхнего края окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента на более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.

4
5
6
7
8
9
10
11
12
13
14
15

 .raz < border: 1px solid red; >.sticky < position: sticky; top: -2em; margin-bottom: -2em; padding-top: 2em; > .sticky div 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.

4
5
6
7
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1
2
3
4
5
6
7
8
9
10
11
12

Прилипну к нижнему краю окна браузера, когда нижний край окна браузера будет ниже верхнего края ближайшего родителя, а нижний край элемента — выше своего первоначального расположения.

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1
2
3
4
5
6
7
Прилипну то к нижнему краю окна браузера, то к верхнему
8
9
10
11
12
13
14
15

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Буду показан под зелёным блоком.
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < border: 1px solid red; >.sticky < position: sticky; top: 0; min-height: 2em; background: lightpink; >.relative 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Буду показан над зелёным блоком.
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < border: 1px solid red; >.sticky < position: sticky; top: 0; z-index: 1; min-height: 2em; background: lightpink; > .relative 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4
5
6
7
8
9
10
11
12

  1 
2
3
4
5
6
7
8
9
10
11
12

Прилипну внутри блока, который можно проскроллить, а не к краю окна браузера
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < overflow: auto; /* добавить полосу прокрутки */ height: 10em; border: 1px solid red; > .sticky 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < overflow: auto; height: 10em; border: 1px solid red; >.sticky 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Достигнуто конечное положение

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Не прилипну

  1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < overflow: auto; height: 10em; border: 1px solid red; >.sticky 
1
2
3 4
5
6
7
8
9
10
11
12
13
14
15

Все четыре свойства top , right , bottom , left имеют значение по умолчанию auto

Не прилипну
4
5
6
7
8
9
10
11
12
13
14
15

 .raz < overflow: auto; height: 10em; border: 1px solid red; >.sticky 1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Примеры

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

  
Название
Основная часть
Подвал

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

    Заголовок Заголовок Заголовок  Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка
Название таблицы

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

Поле ромашекОтражение котёнкаМедвежата у рекиВесёлый паровозик Планета Земля

 .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 
Поле ромашек
Поле ромашек
Отражение котёнка
Отражение котёнка
Медвежата у реки
Медвежата у реки
Весёлый паровозик
Весёлый паровозик
Планета Земля
Планета Земля

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *