Главная страница » CSS » Как создать плавающие блоки для сайта

Как создать плавающие блоки для сайта

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

В данном уроке мы рассмотрим два способа их создания, первый с помощью CSS,и второй с библиотекой jQuery, вот так все выглядит, в демо присутствую оба образца:

1. CSS. Рассмотрим первый и пожалуй самый простой способ это использование фиксированного позиционирования. Наш сайдбар находится внутри слоя #page-wrap с относительным позиционированием, поэтому сайдбар прекрасно разместится — нам только необходимо сдвинуть его влево с помощью свойства margin. Благодаря этому наш блок всегда будет оставаться на одном и том же месте станицы:

#page-wrap {

width: 600px;

margin: 15px auto;

position: relative;

}

#sidebar {

width: 190px;

position: fixed;

margin-left: 410px;

}

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

$(function() {

var offset = $("#sidebar").offset();

var topPadding = 15;

$(window).scroll(function() {

if ($(window).scrollTop() > offset.top) {

$("#sidebar").stop().animate({

marginTop: $(window).scrollTop() - offset.top + topPadding

});

} else {

$("#sidebar").stop().animate({

marginTop: 0

});

}

});

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

На главную