Navigation bar won't go fixed when scrolling down

Question

I tried to make a navigation bar that when you scroll down it goes to the top and the position is fixed. But no luck. http://jsfiddle.net/S99FB/1/

I need help.

Answer 1

When the div is in the position where window-scrolltop position less div-offset are = 0, apply the class. This class will make the div have position fixed and top value 0. When the substraction is negative then remove the class so the div has its normal position.

http://jsfiddle.net/FL8gq/

var nav_bar = $('#nav_bar'),// cache this
    top = nav_bar.offset().top;

$(window).scroll(function () {
    if (($(window).scrollTop() - top) > 0 && !nav_bar.hasClass('navbar-fixed')) {
        nav_bar.addClass('navbar-fixed');
    } else if (($(window).scrollTop() - top) < 0 && nav_bar.hasClass('navbar-fixed')) {
        nav_bar.removeClass('navbar-fixed');
    }
});

Answer 2

Please try removing width: 100%; from navbar-fixed CSS

Answer 3

Add this to the header tag css also.

position: fixed;