10 декабря 2014
Кравченко Виктор

Прилипание блока к границе окна, при его прокручивании

JQuery JavaScript HTML Web
01

Для того, чтобы реализовать прилипание конкретного блока к верхней границе окна, при прокручивании страницы:

02
Пример: Вот этот абзац будет "прилеплен" к верхней границе окна при прокручивании.
03

необходимо:

04 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript"> $(document).ready(function () { var objToStick = $("#objToStick"); //Получаем нужный объект var topOfObjToStick = $(objToStick).offset().top; //Получаем начальное расположение нашего блока $(window).scroll(function () { var windowScroll = $(window).scrollTop(); //Получаем величину, показывающую на сколько прокручено окно if (windowScroll > topOfObjToStick) { // Если прокрутили больше, чем расстояние до блока, то приклеиваем его $(objToStick).addClass("topWindow"); } else { $(objToStick).removeClass("topWindow"); }; }); }); </script>
05

И стиль CSS конечно же:

06 CSS
1
2
3
4
5
.topWindow { position: fixed; top: 0; z-index:9999; /* Чтобы приклеенный элемент располагался над всеми остальными элементами страницы */ }
07

Аналогичным образом реализуется прилипание к любой стороне окна, а также различные способы отображения различных блоков в зависимости от положения скролбара (например, изменение рекламы в процессе прокручивания окна).

08

Похожие запросы:

  • Как сделать прилипание одного (или нескольких) меню к верху экрана при прокрутке с jquery ui position?
  • «Липкий» информационный блок
  • css — Прилипание элемента к верху экрана при прокрутке
  • Прилипание div`a к боку страницы при скролле
  • Плавающий блок (sticky div) | CSS и JavaScript
  • Приклеивающийся к верху экрана блок, с отступом
  • Прилипание блока к верху страницы
comments powered by HyperComments

Яндекс.Метрика