-1

No projeto que estou fazendo, quando o viewport for menor que 767px ele exibirá um menu/navbar porém, ele só deverá ser exibido após determinada seção da página.

Fiz um exemplo no Fiddle, lá está mais bem explicado.

Seção 1 - Não exibe

Seção 2 (Em diante) - Exibe.

Exemplo

HTML:

<nav class="navbar navbar-default navbar-fixed-bottom visible-xs">   <div class="container-fluid"> 

    <div class="navbar-header">
         <!-- <a class="navbar-brand" href="#">LOGO PSTCH</a> </div> -->


    <div class="collapse navbar-collapse visible-xs" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
       <li><a  href="#" data-toggle="modal" data-target="#myModal1" data-direction="bottom"> About</a></li>
       <li><a  href="#" data-toggle="modal" data-target="#myModal2" data-direction='bottom'> Sobre </a></li>
       <li><a  href="#" data-toggle="modal" data-target="#myModal3" data-direction='bottom'> Contact </a></li>


      </ul>    
    </div>
    </div>     </div>  </nav>

 <div id="logo"> 

            <center>
                            <a href="#desce" class="page-scroll  btn btn-xl">SECTION 1</a>
            </center>   </div>

  <div id="content">

    <p> SECTION 2  </p>

      <p> The navbar will appear here down/hereafter!</p>   </div>

CSS:

    html, body {
    height:100%;
    padding:0;
    margin:0;

}






#logo{
            background: black;
            width: 100%;
            height: 100%;          


}

#content {
        border: 1px solid black;
        width: 100%;
        height: 50%;
}

.navbar .nav  li{
    float:none;
    display:inline-block;
    *display:inline; /* Internet Explorer 7 compatibility */
    *zoom:1;
    vertical-align: bottom;

}


.navbar .navbar-collapse {
  text-align: center;
}
2
  • Você quer que a navbar acompanhe o scroll do usuário ou que ela seja fixa no começo da área branca lá? Não consegui entender.
    – Huskell
    Commented 13/12/2015 às 2:22
  • Fixa no rodapé. Exatamente como está lá. O que quero é que: Quando o usuário estiver na Seção 1 (caixa com o fundo preto) o navbar fique oculto! Se eu sair da seção 1 e for para a Seção 2, o navbar deve aparecer.. e assim por diante, entende?
    – Zkk
    Commented 13/12/2015 às 2:29

1 Resposta 1

-1

Talvez você possa aplicar uma margem de 100vh ( 100vh = Toda a tela ). Vh divide a sua tela em 100 partes, se você colocar margin-top: 100vh, ele vai pegar a tela inteira, independente da resolução.

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 .