Css фиксированный блок при прокрутке: Страница отсутствует

Фиксация блоков при прокрутке страницы всего одним CSS свойством sticky, без JS и jQuery

Липкий блок — фиксированный при прокрутке элемент страницы. Может найти своё применение в случаях, когда при прокрутке страницы необходимо спрятать менее важную информацию и обратить внимание пользователя на более важную. Липкие элементы часто используются в боковых панелях сайдбарах (sidebar).

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

В связи с совершенствованием браузеров, сегодня доступно более простое решение вопроса. Зафиксировать элемент при прокрутке можно без использования JS, только средствами CSS. Данный вариант стали поддерживать все популярные браузеры. Не поддерживают только старые версии IE.

Решение идеально простое: достаточно присвоить липкому блоку значение position: sticky; и назначить величину отступа.

Этот элемент несёт в себе относительное позиционирование в родительском контейнере, пока тот не пересечет назначенный порог.
Он ограничен родительским контейнером, в котором находится.

Ниже смотрите примеры:
1. На обычных статических страницах, где прописывается css класс — 2 варианта.
2. При использовании фреймворка Bootstrap 4, где класс прописывать не надо. Достаточно указать блоку его стиль и величину отступа — 3 варианта.

Скачать примеры в конце статьи.

Примеры фиксирования блоков. Липкие элементы sticky.

Смотреть онлайн

Пример фиксации блока по ширине статической страницы: stat-sticky-content
Пример фиксации боковой панели статической страницы: stat-sticky-block

Пример на Bootstrap 4 — фиксирование строки (блока) контента: bs-fix-content
Пример на Bootstrap 4 — фиксация боковой панели sidebar: bs-fix-sidebar
Пример на Bootstrap 4 — фиксация контента при прокрутке боковой панели sidebar: bs-fix-right-content

Применение Sticky фиксирования элементов в Bootstrap 4

Тестировалось на версии Bootstrap 4. 5

Чтобы зафиксировать элемент или блок достаточно добавить существующий в Bootstrap класс position-sticky. При этом не забыть указать верхний отступ, например: div

Также, можно добавить свой класс, например:
.fiksa {
position: sticky; /* Липкое позиционирование */
top: 60px; /* Отступ сверху */
}
и прописать его в HTML документе: div

Настройка фиксации липкого блока или элемента

Разберём на примерах, как сделать блок или элемент страницы фиксированным при прокрутке.

Фиксируемый блок должен быть окутан следующим образом.

<divtrue">stic - это произвольное название класса, которое содержит основной параметр: position: sticky; 
style="top:58px; - расчётное экспериментальным путём значение отступа сверху.
Очень важно обозначить отступ сверху, иначе все старания зря. 
Фиксацию нужного блока можно осуществить несколькими способами: 
1. Добавить к div после стиль: style="position:sticky; top:58px;".  
Это более удобно и присвоенное значение всегда на виду. 
2. Прописать между тегами body стиль: 
<style>
   .stic {
    position: sticky; /* Липкое позиционирование */
    top: 58px; /* Регулировать отступ сверху */
   }
</style>
 
и присвоить (добавить) для div класс
3. Назначить класс в .css файле:
.stic {
    position: sticky; 
    top: 58px; 
   }
Прописать назначенный CSS класс:
<div>
...Фиксируемый блок...
</div>
Важно помнить!
1. Если липкий блок большой по высоте, то следующий за ним контент (элемент) может быть не доступен для просмотра. Это зависит от величины соседней прокручиваемой секции. 
2. В зависимости от настроек вашего шаблона, возможно придётся настроить z-index. Некоторые элементы могут накладываться на липкий блок, обладая более высоким индексом. z-index - это положение элемента по оси Z (глубина наложения). 
Исправить это легко: присвойте прописываемому стилю значение от 1 до ... Можете поиграть значениями мешающих элементов в минусовую сторону от -1 до ...
 
Пример глубины наложения для фиксированного блока:
style="position: sticky; top: 58px; z-index: 2;" 
или
.stic {
position: sticky; 
top: 58px; 
z-index: 3;
}

Скачать примеры фиксации блоков (элементов) при прокрутке страницы: 
 Exemple-Sticky.zip  [291,07 Kb] (cкачиваний: 11)

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

имеется блок div со скроллом. внутри него много текста и блок, который должен быть зафиксирован при скролле. как это сделать?
<div>
  <div>text</div>
   ...
  <div></div>
  <div>text</div>
</div>
Были попытки дать fixed-block position: fixed, но он становится фиксированным относительно окна браузера. 
Были попытки дать 
 fixed-block position: absolute, блок становиться поверх всего текста (как мне и надо), но но при скролле он тоже улетает.
как быть?
html
css
Вы можете создать контейнер для скролла, и уже в нем располагать элементы абсолютно. Например, так:
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 {
  width: 30px;
  height: 30px;
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 20px;
  background-color: green;
}
<div>
  <div></div>
  <div>
    <p>Не поддавайтесь панике, даже если очень хочется. В самых разных уголках мира маглов вдруг начали появляться следы волшебства. Мы беспокоимся, что в скором времени это заметят даже крайне безразличные маглы.
  Волшебники и волшебницы, нам нужна ваша помощь!</p>
    <p> Если не обуздать это бедствие, наступят страшные времена, как сами знаете когда при Сами-Знаете-Ком. Повторите знакомые вам заклинания, берите палочку и вступайте в наши ряды!</p>
  </div>
</div>
 
 

 


Зарегистрируйтесь или войдите
 Регистрация через Google
 Регистрация через Facebook
 Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
 

Отправить без регистрации
 
 
Почта
Необходима, но никому не показывается

 


 Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
 
 html.
 Как я могу сделать содержимое фиксированного элемента прокручиваемым только тогда, когда оно превышает высоту области просмотра?
 спросил  9 лет, 1 месяц назад 
 Изменено
 2 года, 5 месяцев назад
 Просмотрено
 354 тыс. раз
 У меня есть  div  позиционированный  фиксированный  в левой части веб-страницы, содержащей меню и навигационные ссылки. У него нет высоты, установленной из css, содержимое определяет высоту, ширина фиксирована. Проблема в том, что если содержимого слишком много, 
  div  будет больше высоты окна, и часть содержимого будет не видна. (Прокрутка окна не помогает, поскольку позиция  фиксированная , а  div  не прокручивается.)
 Я попытался установить  overflow-y:auto; , но это тоже не помогает, div, кажется, не замечает, что его часть находится за пределами окна.
 Как я могу сделать его содержимое прокручиваемым только при необходимости, если  div  висит вне окна?
 HTML
 CSS
 CSS-позиция
 4
 Наверное, нельзя. Вот что-то близкое. Вы не получите контент, который будет обтекать его, если внизу есть место.
 
 
 http://jsfiddle.net/ThnLk/1289
 .stuck {
    положение: фиксированное;
    верх: 10 пикселей;
    слева: 10 пикселей;
    внизу: 10 пикселей;
    ширина: 180 пикселей;
    переполнение-у: прокрутка;
}
 
 Вы также можете указать высоту в процентах:
 http://jsfiddle.net/ThnLk/1287/
 .stuck {
    максимальная высота: 100%;
}
 
 0
 По ссылке ниже показано, как я этого добился. Не очень сложно - просто нужно использовать какой-нибудь умный интерфейсный разработчик!
 <дел>
    <дел>
       Меню HTML идет здесь