bootstrap navbar container when scroll down navbar fixed top container fluid

I wanna ask some help from you guys with regards of bootstrap navbar container when it scrolls down the navbar fixed at the top and the same time container fluid

I provide you also codepen link so you play around Codepen div

So,

If I understand your question, you want to affix the navbar to the top after the user begins to scroll. Well, here is my implementation of of this... I used this answer https://stackoverflow.com/a/21301875 and modified it for this scenario as well as documented the code.

Codepen

/**
 * Scroll management
 */
$(document).ready(function () {

    // Define the menu we are working with
    var menu = $('.navbar.navbar-default.navbar-inverse');

    // Get the menus current offset
    var origOffsetY = menu.offset().top;

    /**
     * scroll
     * Perform our menu mod
     */
    function scroll() {

        // Check the menus offset. 
        if ($(window).scrollTop() >= origOffsetY) {

            //If it is indeed beyond the offset, affix it to the top.
            $(menu).addClass('navbar-fixed-top');

        } else {

            // Otherwise, un affix it.
            $(menu).removeClass('navbar-fixed-top');

        }
    }

    // Anytime the document is scrolled act on it
    document.onscroll = scroll;

});