Плавающий сайдбар с помощью CSS или jQuery

В сегодняшнем простом уроке мы рассмотрим несколько способов создания сайдбара, который находится всегда в зоне видимости. При скролле вниз сайдбар с необходимой информацией будет перед глазами посетителей.

Существует множество решений подобной проблемы. В этом уроке мы рассмторим две: с помощью CSS и JavaScript (jQuery).

CSS

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

#page-wrap {
width: 600px;
margin: 15px auto;
position: relative;
}

#sidebar {
width: 190px;
position: fixed;
margin-left: 410px;
}

С помощью этой техники сайдбар всегда остается на одном и том же месте.

jQuery

Если мы будем использовать JavaScript, мы можем точно измерить насколько вниз пользователь воспользовался скроллом после события window.scroll. Если это расстояние больше чем стартовая верхняя позиция сайдбара, мы можем изменить 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
});
}
});
});

В этой техники нет ничего особенного, кроме неплохого эффекта, который может привлечь внимание посетителей.

Бонусная техника

Это довольно интересное решение. Суть заключается в том, что у сайдбара сверху есть шапка с фоном. Для шапки можно использовать отрицательную top margin. Изображение в шапке должно быть прозрачным и использовать z-index. Получается, что в верхнем положение изображение находится под шапкой сайта, но как только пользователь прокручивает страницу вниз - изображение выезжает из-под шапки сайта и прокручивается вниз вместе с сайдбаром.

#sidebar {
width: 190px;
position: fixed;
margin: -135px 0 0 410px;
}


/* Шапка сайдбара с з-индексом */
#title-area {
background: white;
position: relative;
z-index: 3000;

}

/* прозрачное изображение */
#reveal {
position: absolute;
right: 0;
bottom: -20px;
}

Должно работать во всех браузерах.

Надеюсь, Вам это понадобится! До новых уроков! Удачи!