Как закрепить элемент при прокрутке html

Как зафиксировать слой, чтобы он оставался на одном месте при прокрутке страницы?

Задать положение блочного элемента, чтобы он всегда оставался на одном месте при прокрутке страницы.

Решение

«Замораживание» элемента в определённом месте веб-страницы происходит с помощью стилевого свойства position со значением fixed . При этом положение элемента не меняется даже при прокрутке страницы с помощью скроллинга. Сами координаты задаются через свойства left , right , top и bottom , которые соответственно определяют положение от левого, правого, верхнего и нижнего края окна браузера (пример 1).

Пример 1. Использование position

HTML5 CSS 2.1 IE Cr Op Sa Fx

     .menu < position: fixed; /* Фиксированное положение */ right: 10px; /* Расстояние от правого края окна браузера */ top: 20%; /* Расстояние сверху */ padding: 10px; /* Поля вокруг текста */ background: #ffe; /* Цвет фона */ border: 1px solid #333; /* Параметры рамки */ >.text   

Результат данного примера показан на рис. 1. Обратите внимание, что положение элемента не меняется при прокрутке страницы вниз.

Рис. 1. Положение блока с меню

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

как зафиксировать блок в блоке со скролом при прокрутке?

имеется блок div со скроллом. внутри него много текста и блок, который должен быть зафиксирован при скролле. как это сделать?

 
text
 . 
text
 
 

Были попытки дать fixed-block position: fixed , но он становится фиксированным относительно окна браузера.
Были попытки дать fixed-block position: absolute , блок становиться поверх всего текста (как мне и надо), но но при скролле он тоже улетает.
как быть?

Отслеживать
задан 28 ноя 2018 в 16:21
Ilya Nikulin Ilya Nikulin
101 1 1 серебряный знак 8 8 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Вы можете создать контейнер для скролла, и уже в нем располагать элементы абсолютно. Например, так:

div.container < width: 100%; height: 100px; position: relative; >div.scroll < width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow-y: scroll; >div.fixed-block

 
 
Не поддавайтесь панике, даже если очень хочется. В самых разных уголках мира маглов вдруг начали появляться следы волшебства. Мы беспокоимся, что в скором времени это заметят даже крайне безразличные маглы. Волшебники и волшебницы, нам нужна ваша помощь!
 
Если не обуздать это бедствие, наступят страшные времена, как сами знаете когда при Сами-Знаете-Ком. Повторите знакомые вам заклинания, берите палочку и вступайте в наши ряды!
 
 

Варианта фиксации элемента на сайте на CSS/jQuery

Фиксирование элементов пользуется большой популярностью при создании сайтов и разработке интернет-магазинов. Это отличное решение, которое позволяет ограничить пользователя вашего сайта от лишних действий, для того чтобы сделать акцент на важных элементах. Зафиксировать элемент на странице можно разными способами, в каждом из них свои преимущества.

Фиксация элемента на сайте на CSS position: fixed

Положение в таком случае будет сверху top: 0, на всю ширину экрана. Такой вариант хорошо подходит для элементов сайта, которые должны находиться в самом верху. Если хотите изменить положением – это делается свойствами left, top, right и bottom соответственно. Один из минусов – не подходит для элементов, находящихся ниже верхней границы экрана.

Фиксация элемента на сайте на CSS position: sticky

В данном примере значение position устанавливаем sticky. Sticky фиксирует элемент только в рамках родительского контейнера. Фиксация объекта начнется только тогда, когда верхняя граница элемента совпадет с видимой верхней частью окна браузера, и завершается при достижении элементом конца родителя, при этом другие элементы остаются статическмим.

Фиксация элемента на jQuery при прокрутке страницы

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

Фиксация элемента на jQuery при прокрутке страницы с остановкой в определенном месте

Такой пример является доработкой вышеуказанного способа. Который при прокрутке страницы до самого низа не перекрывают футер (низ сайта) и зачастую препятствуют получению немаловажной информации или навигации в нем.

Еще один пример фиксации блока при прокрутке можно постомтреть здесь. А также липкую панель Sticky Sidebar на jQuery по ссылке.

Прилипающий блок 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