Сделать начало div в середине страницы, но когда пользователь прокручивает страницу вниз, она остается вверху?

Question

Лучше привести пример, чтобы проиллюстрировать то, что я описываю.

Элемент div со списком категорий начинается в середине страницы, но когда пользователь прокручивает его вниз, он остается вверху?

http://www.khanacademy.org/

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

Answer 1

Вот быстрый пример того, что вы ищете, на jsFiddle. По сути, у вас есть div, который изначально позиционирован относительно, затем, когда страница прокручивается, позиция меняется на фиксированную. jQuery выполняет тяжелую работу с событием $(window).scroll.

JQuery:

var stickerTop = parseInt($('#sticker').offset().top);
$(window).scroll(function() {
    $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
        position: 'fixed',
        top: '0px'
    } : {
        position: 'relative'
    });
});​

CSS:

body {
    width: 960px;
}
#mainbar {
    width: 660px;
    float: left;
}
#sidebar {
    width: 270px;
    float: right;
}
#sticker {
    width: 200px;
    padding: 10px;
    margin-top:25px;
    background: #eee;
    border: 1px solid #ccc;
}​