Question

I want to achieve a menu something like:
http://craigsworks.com/projects/qtip2/tutorials/

Everytime you scroll down on the page , a specific div menu always stays on top.

Any help or tutorial link page, is well appreciated.

Here is the screenshots:

http://www.pokoot.com/menu.png

http://www.pokoot.com/menu2.png

Answer 1

You can fix the position of an element using CSS. For example,

#floatingMenu {
    position: fixed;
    top: 0px;
}

would keep #floatingMenu at the top of the page at all times. Then, if you want to mimic theirs where the fixed-position menu bar doesn’t show up until you’ve scrolled past some point on the page, you could do something like the following:

$docBody = $(document.body);
$docBody.scroll( function() {
    // replace 100 with whatever the non-floating menu bar's distance from the top of the page is
    if ($docBody.scrollTop() < 100) { 
        $('#floatingMenu ').hide();
    } else {
        $('#floatingMenu ').show();
    }
} );