CODEWITHSUNDEEP
jqueryhtmlcss
trying_hal9000
trying_hal9000

Reputation: 4403

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

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 what I mean: http://fab.com/help/ (you don't need an account to scroll). When you scroll down, the black menu bar at the top disappears and the white menu bar with "How can we help you" becomes absolutely positioned.

I created a an example with a similar menu system,

http://jsfiddle.net/jkdbP/

but I don't know where to start to make it become absolutely positioned once it's scrolled by, thanks a lot for any insights!

Upvotes: 15

Views: 1828

Answers (2)

Ry-
Ry-

Reputation: 225054

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.

Upvotes: 15

Hauleth
Hauleth

Reputation: 23586

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

Upvotes: 0

Related Questions