-1

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

what i mean

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

msanford
  • 11,803
  • 11
  • 66
  • 93
jricc russel
  • 61
  • 3
  • 9
  • yes it's matter, how they will help you if they don't understand your questions? – buncis Aug 04 '17 at 11:48
  • original op's question is using bad english apparently some people could decipher it and apparently the question is just as same as [How to Bootstrap navbar static to fixed on scroll?](https://stackoverflow.com/questions/21301316/how-to-bootstrap-navbar-static-to-fixed-on-scroll) – buncis May 10 '21 at 00:28

2 Answers2

1

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;

});
Zakky
  • 139
  • 6
-3

add container-fluid in line 3

<div class="container-fluid">

add navbar fixed top in line 5

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">

codepen

see the documentation; your answer is covered there. http://getbootstrap.com/components/#navbar

Makyen
  • 31,849
  • 12
  • 86
  • 121
buncis
  • 2,148
  • 1
  • 23
  • 25
  • `Please consider adding a comment if you think this post can be improved.` idk why its downvoted the original op's question itself is using confusing english, of course I will not post this as and answer if OP ask using understandable english like this [one](https://stackoverflow.com/questions/21301316/how-to-bootstrap-navbar-static-to-fixed-on-scroll/21301875). you could check byurself the date I answer, the date the question edited and its history, and the accepted answer date. – buncis May 10 '21 at 00:33