No Image

Закрепить div при прокрутке

СОДЕРЖАНИЕ
849 просмотров
10 марта 2020

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

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

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

2 варианта зафиксировать блок при прокрутке страницы (на jQuery и на чистом CSS)

Существует много различных плагинов, чтобы "залепить" блок на месте, когда страница прокручивается вниз. И некоторые из них, мягко говоря, ужасные и дергают страницу вверх в момент, когда блок меняет свою позицию на фиксированную.

"Залипание" блока можно сделать гораздо проще, воспользовавшись небольшим скриптом на jQuery или всего одним свойством на CSS

Вариант на CSS (position: sticky):

Для фиксации блока таким способом достаточно просто добавить нужному элементу свойство position: sticky

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

Фиксирование элементов сейчас пользуется большой популярностью. Так, например, «Яндекс» или социальная сеть «ВКонтакте» (на момент написания статьи) фиксируют свое меню и поиск при прокрутке страницы. Вполне хорошее решение, позволяющее ограничить пользователя от лишних действий в получении доступа к нужному функционалу сайта и позволяющее сделать некий акцент на важных элементах.

Читайте также:  Стоит ли покупать телефон не ростест

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

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

Самый простой вариант – это фиксация элемента на чистом CSS. Все, что вам нужно, это добавить следующие стили к элементу:

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

Если хотите поиграть с положением – измените значение свойств left, top, right и bottom соответственно.

Минусы – не подходит для элементов, находящихся ниже верхней границы сайта.

Здесь на помощь к нам приходит другое значение position – sticky. Оно фиксирует тот или иной элемент только в рамках первого родительского контейнера. Фиксация элемента при этом начнется тогда, когда верхняя граница элемента совпадет с верхней частью окна браузера, и завершится при достижении элементом конца родителя, при этом другие элементы (и даже окружаемый текст) не смещаются, что очень удобно в отдельно взятых случаях. Пример использования:

Эти стили вы присваиваете тому элементу, который хотите зафиксировать. Свойство top со значением «10px» говорит здесь о том, что при фиксации элемента необходимо сделать отступ от верхней границы в 10 пикселей.

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

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

«.fixed_block» здесь – это класс элемента, который нужно зафиксировать при прокрутке, а «.fixed_block_position» – класс обертки.

Их вы вставляете без изменений. Отличный вариант для фиксации рекламных блоков или других элементов находящихся не в первых рядах.

Читайте также:  Закладывает уши при посадке самолета

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

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

Чтобы исправить этот конфуз и удержать блок при достижении указанной области, и существует этот вариант.

Ну и те же стили из второго варианта с небольшим дополнением:

На что здесь стоить обратить внимание?

«.fixed_block» – это элемент, который мы фиксируем при прокрутке. «.fixed_block_position» – класс обертки, а «.fixed_block_stop» – это элемент (граница), достигнув которую элемент остановит свое движение (фиксацию).

Комментировать
849 просмотров
Комментариев нет, будьте первым кто его оставит

Это интересно
Adblock
detector