javascript - How to Bootstrap navbar static to fixed on scroll?

Question

I would like to make static navbar to fixed navbar on scroll, when it reaches top of the page.

Is there a way to get it using bootstrap 3 css or javascript?

Answer 1

If I'm not wrong, what you're trying to achieve is called Sticky navbar.

With a few lines of jQuery and the scroll event is pretty easy to achieve:

$(document).ready(function() {

    var menu = $('.menu');
    var content = $('.content');
    var origOffsetY = menu.offset().top;

    function scroll() {
        if ($(window).scrollTop() >= origOffsetY) {
            menu.addClass('sticky');
            content.addClass('menu-padding');
        } else {
            menu.removeClass('sticky');
            content.removeClass('menu-padding');
        }
    }

    $(document).scroll();

});

I've done a quick working sample for you, hope it helps: http://jsfiddle.net/yeco/4EcFf/

To make it work with Bootstrap you only need to add or remove "navbar-fixed-top" instead of the "sticky" class in the jsfiddle .