2

Estou usando bootstrap e tenho uma navbar comum:

<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>

Ao rolar o scroll, a minha nav deveria se tornar fixed e acompanhar a página. Como poderia proceder?

1 Resposta 1

3

Tente usar isso:

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); 
    }
});

O valor do num é o tanto de scroll que vai precisar para a nav ficar fixa.

Lembrando que precisa importar a biblioteca jQuery.

1
  • Testei e realmente funcionou, já estava com o jQuery sendo importado em meu projeto para o funcionamento dos itens da dropdown. Estou esperando apenas o tempo necessário para atribuir a sua resposta como solução. Commented 31/07/2014 às 19:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .