Плавающий сайдбар с помощью CSS или 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;
}