как зафиксировать блок в блоке со скролом при прокрутке?
имеется блок 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
Не поддавайтесь панике, даже если очень хочется. В самых разных уголках мира маглов вдруг начали появляться следы волшебства. Мы беспокоимся, что в скором времени это заметят даже крайне безразличные маглы. Волшебники и волшебницы, нам нужна ваша помощь!
Если не обуздать это бедствие, наступят страшные времена, как сами знаете когда при Сами-Знаете-Ком. Повторите знакомые вам заклинания, берите палочку и вступайте в наши ряды!
Фиксация блока при прокрутке
Существует много различных плагинов, чтобы «залепить» блок на месте, когда страница прокручивается вниз. И некоторые из них, мягко говоря, ужасные и дергают страницу вверх в момент, когда блок меняет свою позицию на фиксированную.
«Залипание» блока можно сделать гораздо проще, воспользовавшись небольшим скриптом на jQuery или всего одним свойством на CSS
Вариант на CSS (position: sticky):
Для фиксации блока таким способом достаточно просто добавить нужному элементу свойство position: sticky
Такой элемент будет рассматриваться как относительно позиционированный до тех пор, пока родительский контейнер не пересечет указанный порог, в котором он прокручивается, после чего он обрабатывается как фиксированный до тех пор, пока не встретит противоположный край содержащего его блока. Другими словами этот элемент остается ограниченным родительским контейнером, в котором он находится.
Фиксация блоков при прокрутке страницы всего одним 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 style
Также, можно добавить свой класс, например:
.fiksa position: sticky; /* Липкое позиционирование */
top: 60px; /* Отступ сверху */
>
и прописать его в HTML документе: div class
Настройка фиксации липкого блока или элемента
Разберём на примерах, как сделать блок или элемент страницы фиксированным при прокрутке.
Фиксируемый блок должен быть окутан следующим образом.