Nrthugu

I hope you can help me. I want my navbar to be fixed but only when I go up, that is to say when it goes down it disappears but at the time of uploading it is visible, like chevrolet.

<nav class="navbar navbar-inverse">

                <div class="container-fluid">

                    <div class="navbar-header">

                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                          <span class="sr-only">Toggle navigation</span>

                          <span class="icon-bar"></span>

                          <span class="icon-bar"></span>

                          <span class="icon-bar"></span>

                        </button>

                        <a class="navbar-brand" href="#">App Web</a>

                    </div>



                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                      <ul class="nav navbar-nav">

                          <li><a href="index.html"><span class="glyphicon glyphicon-home"></span> x</a></li>

                          <li><a href="#"><span class="glyphicon glyphicon-inbox"></span> x</a></li>

                          <li><a href="#"><span class="glyphicon glyphicon-user"></span> z</a></li>

                      </ul>

                    </div>

                </div>

            </nav>

A quick google search brought up this article which I think answers your question nicely: Medium.com/HideHeaderOnScrollDown.

HTML:

<header class="nav-down">

    This is your menu.

</header>

<main>

    This is your body.

</main>

<footer>

    This is your footer.

</footer>

CSS:

body {

  padding-top: 40px; // same as header height

}

header {

  background: #f5b335;

  height: 40px;

  position: fixed;

  top: 0;

  transition: top 0.2s ease-in-out;

  width: 100%;

}

// add this class using javascript

.nav-up {

  top: -40px; // same as header height. use variables in LESS/SASS

}

JavaScript & jQuery:

// Hide Header on on scroll down

var didScroll;

var lastScrollTop = 0;

var delta = 5;

var navbarHeight = $('header').outerHeight();



$(window).scroll(function(event){

    didScroll = true;

});



setInterval(function() {

    if (didScroll) {

        hasScrolled();

        didScroll = false;

    }

}, 250);



function hasScrolled() {

    var st = $(this).scrollTop();



    // Make sure they scroll more than delta

    if(Math.abs(lastScrollTop - st) <= delta)

        return;



    // If they scrolled down and are past the navbar, add class .nav-up.

    // This is necessary so you never see what is "behind" the navbar.

    if (st > lastScrollTop && st > navbarHeight){

        // Scroll Down

        $('header').removeClass('nav-down').addClass('nav-up');

    } else {

        // Scroll Up

        if(st + $(window).height() < $(document).height()) {

            $('header').removeClass('nav-up').addClass('nav-down');

        }

    }



    lastScrollTop = st;

}

The JSFiddle for this code is here

Without seeing more of your code it's hard for me to tailor this example to your exact needs, however you should be able to change a few things, like the padding-top on body to be the same as your header height, to make this work.