Ir para conteúdo

Publicidade

 Tópicos semelhantes

 Estatísticas do Fórum

  • 0 Usuários ativos

    0 membros, 0 visitantes, 0 membros anônimos

Foto
- - - - -

Menu parar no topo da página ao rolar scrol

bootstrap menu
  • Por favor, faça o login para responder
3 respostas neste tópico

#1 marcelobbt

marcelobbt

    Estudante de PHP e Java

  • Members
  • 218 posts

Postado 11 janeiro 2017 - 15:05

Pesquisei diversos sites mas não consegui encontrar um código que fizesse o menu parar no topo da página ao rolar o scroll e ao mesmo tempo funcionasse com o bootstrap.

 

Seria algo desse tipo: http://www.w3schools...rap/default.asp

 

Alguém teria uma dica?

 

Abaixo parte do meu código:

<div class="row">
	<img class="img-responsive" src="<?php echo base_url(); ?>img/banner.jpg">
</div>
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!--Botão para telas pequenas-->
    <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">navegacao</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!--<a style="padding: 0" class="navbar-brand" href="index.html"><img src="<?php echo base_url(); ?>img/logo.jpg"></a>-->
    </div>
    <!-- Itens do menu -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <?php $this->load->view($menu); ?>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

A ideia é a primeiro div ficar acima do menu e sumir quando o scroll rolar, mas o menu ficar fixo no topo.

 

Obs.: Nesse código o primeiro div está ficando embaixo do menu.


  • 0

Publicidade

#2 gabrieldarezzo

gabrieldarezzo
  • Members
  • 712 posts

Postado 11 janeiro 2017 - 15:40

Isso ai é CSS, não JS.

 

http://www.w3schools..._fixed_menu.asp

 

To longe de ser perito em CSS mas,

busca por essas tags:

#top {
  position: fixed;
  top: 20px;
}


  • 0

#3 marcelobbt

marcelobbt

    Estudante de PHP e Java

  • Members
  • 218 posts

Postado 12 janeiro 2017 - 06:14

Mas tem uma parte de java script que vai fazer o menu subir até chegar ao topo e então ele muda o css para ficar fixo.

 

A ideia eu sei. só não estou conseguindo fazer em conjunto com o bootstrap.


  • 0

#4 andreneeto

andreneeto
  • Members
  • 43 posts

Postado 13 janeiro 2017 - 10:33

Posta teu exemplo no https://jsfiddle.net/ que eu te ajudo!


  • 0




Publicidade