CSS/HTML: как сделать что-то абсолютным, как только вы прокрутите его

Я новичок в CSS и HTML здесь, и я пытаюсь научиться делать что-то абсолютно позиционируемым, как только вы прокручиваете его на странице.

Вот пример того, что я имею в виду: http://fab.com/help/ (вам не нужна учетная запись для прокрутки). Когда вы прокручиваете вниз, черная панель меню вверху исчезает, и белая панель меню с "Как нам помочь" становится абсолютно позиционированной.

Я создал пример с аналогичной системой меню,

http://jsfiddle.net/jkdbP/

но я не знаю, с чего начать, чтобы он стал абсолютно позиционированным после прокрутки, спасибо за понимание!

ОТВЕТЫ

Ответ 1

См. этот jsFiddle: http://jsfiddle.net/jkdbP/2/

var menuTop = $('.menu').offset().top;
var menuClone = $('.menu').clone().addClass('fixed');

$(window).bind('scroll', function() {
    var scrollY = window.pageYOffset;

    if(scrollY > menuTop) {
        if(menuClone.parent().length === 0) {
            menuClone.appendTo($('.menu').parent());
        }
    } else if(menuClone.parent().length > 0) {
        menuClone.remove();
    }
});

Вы можете использовать jQuery .offset().top, чтобы получить Y-позицию вашего меню, и window.pageYOffset (или document.body.scrollTop для старой совместимости IE), чтобы получить смещение прокрутки страницы. Затем вы можете обработать событие window scroll.