CODEWITHSUNDEEP
cssscroll
Cavemanharris
Cavemanharris

Reputation: 183

CSS Position Fixing

I have managed to use the position:fixed setting of CSS/CSS3 before and worked quite well!

I saw this a few days ago and was wondering how did they achieve the effect that happens when you scroll down, where the menu bar is in one position before you scroll and then goes to the top where it locks itself down.

See link - http://www.cssportal.com/ < scroll down on any page and observe the top blue menu.

I have tried to look in the source of the page but I cant make head or tails.

Does anyone know what this effect is called?

Upvotes: 0

Views: 106

Answers (1)

Johan Bouveng
Johan Bouveng

Reputation: 565

It's done with javascript, to add a css class that contains position:fixed and other positioning styles to achieve what you want.

It's not complicated. Here is a jquery plugin: http://stickyjs.com/

This is how I did it a few years ago:

var menu_bar = $("#menu");
var top = menu_bar.offset().top;
var detached = false;

$(window).scroll(function (e) {
    if ($(this).scrollTop() >= top) {
        if (!detached) {
            detached = true;
            menu_bar.addClass('fixed');
        }
    } else {
        if (detached) {
            detached = false;
            menu_bar.removeClass('fixed');
        }
    }
});

Upvotes: 3

Related Questions