3

Tenho uma div com height 100% e após ela uma navbar. Gostaria de que, quando descesse a página a navbar se fixasse ao topo da página.

CSS

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #27ae60;
    text-align:center;
    z-index: 99;
    position: relative;
}
ul.navbar li {
    display: inline;
}
ul.navbar li:not(:nth-last-child(2)) {
    border-right: 1px solid #079342;
}
ul.navbar li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 20px;
    text-decoration: none;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    font-size: 100%;
    text-transform: uppercase;
    font-weight: 300;
}
ul.navbar li a:hover { 
    color: #e6e6e6 !important;
}
ul.navbar li.navbar-icon {display: none;}
@media screen and (max-width:680px) {
  ul.navbar{text-align:left;}
  ul.navbar li:not(:first-child) {display: none;}
  ul.navbar li.navbar-icon {
    float: right;
    padding-bottom: -5px;
    display: inline-block;
  }
  ul.navbar li.navbar-icon a {
    padding-bottom: 17px;
  }
}
@media screen and (max-width:680px) {
    ul.navbar.navbar-responsive {
        position: relative;
    }
    ul.navbar.navbar-responsive li.navbar-icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.navbar.navbar-responsive li {
        float: none;
        display: inline;
    }
    ul.navbar.navbar-responsive li a {
        display: block;
        text-align: left;
    }
    ul.navbar li:first-child {
        border-right: none;
    }
}

HTML

<ul class="navbar" id="navbar">
    <li>
        <a href="#">Item 1</a>
    </li>
    <li>
        <a href="#">Item 2</a>
    </li>
    <li>
        <a href="#">Item 3</a>
    </li>
    <li>
        <a href="#">Item 4</a>
    </li>
    <li>
        <a href="#">Item 5</a>
    </li>
    <li class="navbar-icon">
        <a href="javascript:void(0);" style="font-size:15px;" onclick="menuToggle()"><i class="ion-navicon"></i></a>
    </li>
</ul>
2

1 Resposta 1

2

Veja funcionando aqui JSFiddle.

Usa a função scroll, detecta o evento de rolar a página, verifica se o tamanho rolado para baixo é maior a altura da navbar. Se maior, adiciona a classe que força ele ficar no topo - se não, remove a classe caso tenha sido atribuída alguma vez.

$(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 60)
        {
            $('#navbar').addClass('navbar-fixed-top', 500);
        } else {
            $('#navbar').removeClass('navbar-fixed-top', 500);  
        }
    });
});

Aqui o CSS, com a classe mencionada no trecho acima. A classe força a posição ser fixa no topo e o tamanho na horizontal ser extender a 100%.

.navbar-fixed-top {
    position: fixed !important;
    top: 0;
    width: 100%;
}
2
  • Funcionou bem, porém ela fixa quando passam os primeiros 60 pixels, preciso que fixe ao passar de 100% da altura 29/01/2017 às 3:39
  • 1
    Troque 60px por screen.height que é o tamanho em 100% do tela.
    – user49127
    29/01/2017 às 12:23

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 .