Jquery Navbar Fixed after scrolling

Question

I’m wearing bootstrap and have a common navbar:

<div class="navbar navbar-fixed-top">
        <div class="container">
            <button type="button" class="navbar-toggle navbar-default" data-toggle="collapse" data-target=".navbar-collapse">
                Menu
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-collapse collapse navbar-default">
                <nav id="nav-bottom" role="navigation">
                    <div class="navbar-inner">
                        <ul class="nav navbar-nav">
                            <li>
                                @Html.ActionLink("Biografia", "Index", "BiografiaMauricio")
                            </li>
                            <li>
                                @Html.ActionLink("Agenda", "Index", "AgendaMauricio")
                            </li>
                            <li>
                                <a href="http://www.consulfarma.com/CursoVideo.aspx?Modulo=Professor&Categoria=Maur%C3%ADcio%20Pupo" target="_blank">Cursos a Distância</a>
                            <li>
                                <a href="http://ipupo.com.br/cursos/pos/CosmetologiaClinica.aspx" target="_blank">Pós-Graduação</a>
                            </li>
                            <li>
                                @Html.ActionLink("Artigos Técnicos", "Index", "Artigos")
                            </li>

                            <li>
                                @Html.ActionLink("Vídeos", "Index", "Videos")
                            </li>
                            <li>
                                @Html.ActionLink("Saiu na Mídia", "Index", "SaiuMidia")
                            </li>
                            <li>
                                @Html.ActionLink("Livros", "Index", "Livros")
                            </li>
                            <li>
                                @Html.ActionLink("Fotos", "Index", "Fotos")
                            </li>
                            <li>
                                <a href="https://www.facebook.com/" target="_blank">Facebook</a>
                            </li>
                            <li>
                                @Html.ActionLink("Contato", "Index", "Contato")
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>

        </div>
    </div>

When scrolling, my Nav should become Fixed and accompany the page. How could you proceed?

Answer 1

Try to use this:

var num = 50; // tanto de scroll que vai precisar para a barra ficar fixa.

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.navbar-fixed-top').css('top', 0);
    } else {
       //Quando o menu ficar fixo
        $('.navbar-fixed-top').css('top', 130); 
    }
});

The value of the num is the amount of scroll you will need for the Nav to stay fixed.

Remembering that you need to import the jQuery library.