| 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 |
Похожие запросы:
|
|