Как элементы закрепляются в верхней части страницы только при прокрутке?

Вы можете взглянуть на подключаемый модуль jQuery sticky.js. Он справляется с такими вещами довольно хорошо, если вам это не нужно слишком причудливо.

Принцип этого заключается в проверке наличия прокрутки в контейнере элемента. Он исправляется при достижении определенного уровня прокрутки.

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

Пример:

Здесь я жестко запрограммировал верхнюю позицию, потому что она никогда не меняется в моем сценарии использования.

var $window = $(window), $menu = $("#menu");
$window.bind('scroll', function() {
    var pos = +$window.scrollTop();
    if (pos > 284) {
        $menu.addClass("fixed");
    }
    else {
        $menu.removeClass("fixed");
    }
}).trigger("scroll");​

где fixed — это класс, который устанавливает для position фиксированное значение, а для top — 0.

Используя jQuery, вы добавляете в документ слушатель прокрутки:

$(document).scroll(function() {

});

Внутри этой функции вы проверяете, больше ли значение scrollHeight документа, чем y-позиция элемента:

if($(document).scrollTop() < $('.sidebar').offset().top) {
    // here you change the css attributes position to fixed and top to 0
    $('.sidebar').css('position', 'fixed').css('top', 0);
} else {
    // change the position of the element to relative (default)
    $('.sidebar').css('position', 'relative');
}

Это почти работает, но поскольку вы всегда проверяете позицию фиксированного элемента, y-позиция всегда равна 0. Чтобы заставить это работать, вам просто нужно сохранить y-позицию по умолчанию. Это код, который я также использую:

var initial_y = $('.sidebar').offset().top;

$(document).scroll(function() {
    $e = $('.sidebar');
    if(initial_y - $(document).scrollTop() <= 0) {
        $e.css('position', 'fixed').css('top', 0);
    } else {
         $e.css('position', 'relative');
    }
});