CSS/HTML : how to make something become absolute positioned once you scroll by it

Question

I\'m new to CSS and HTML here and I\'m trying to learn how to make something become absolutely positioned once you scroll by it on the page.

Here\'s an example of wh

Answer 1

See this 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();
    }
});

You can use jQuery's .offset().top to get the Y-position of your menu, and window.pageYOffset (or document.body.scrollTop for old IE compatibility) to get the page's scroll offset. You can then handle the window's scroll event.

Answer 2

Read about CSS position attribute and jQuery .scroll() method