Fix menu bar at top of page once header has been scrolled past

Question

Firstly I apologise if this is too open-ended a question.

I am aware of making the header of a web page static so it is always visible at the top of the viewport and the content passes beneath it as you scroll down. This can be achieved purely with css.

I was wondering how you would achieve letting the header scroll off the page but leave a horizontal menu bar static at the top. http://www.forexfactory.com is a perfect example of this.

I see it calls a JavaScript function onHeaderComplete.execute() which I assume applies extra css style to the nav bar when the header scrolls off but I'm unsure of how it works. Any basic explanation appreciated as my JavaScript skills are relatively limited.

Answer 1

I just answered similar question. CHECK THIS QUESTION

$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

DEMO

Answer 2

You can write like this:

$(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
         $('div').addClass('fix');
    } else {
         $('div').removeClass('fix');
    }
});

CSS

.fix{
    position:fixed;
    top:0;
    left:0;
    right:0;
    margin:0;
}

Check this http://jsfiddle.net/a42qB/