Publicidade

Entre para seguir isso  
Seguidores 0
marcelobbt

Menu parar no topo da página ao rolar scrol

Patrocínio:

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.com/bootstrap/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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Isso ai é CSS, não JS.

http://www.w3schools.com/howto/howto_css_fixed_menu.asp

To longe de ser perito em CSS mas,

busca por essas tags:

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

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!


Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.


Entrar Agora
Entre para seguir isso  
Seguidores 0

  • Próximos Eventos

  • Conteúdo Similar

    • Por Iskandar
      Boa noite pessoal, minha dúvida é bem simples.
       
      Queria saber como uso transitions/animations no Vue, sem precisar do v-if. Se é que é possível.
      Em minha aplicação utilizo Vue com o Bootstrap e queria utilizar as animações nos menus Dropdown, tipo clica no botão e o dropdown aparece com alguma animação, em seguida ele some com outra animação.
       
      Alguém sabe como?
       
      Agradeço.
    • Por AndersonWS
      Não sei muito de JavaScript, creio que seja simples mas não estou conseguindo resolver.
       
      Precisava de uma função Accordion que ao clicar no próximo item, fechasse as informações do anterior e assim por diante.
      Usei o Accordion Bootstrap e funciona como eu queria, porém fico com um problema.
      Quando clico no botão para abrir as informações ele abre a informação mas o "sinal" de "mais" não muda pra "menos" usando essa função:
      $("a").click(function() { $("div").removeClass('in'); if ("div".style.display !== "active") { $("div").addClass('active'); } else { $("div").removeClass('active'); } }); Se eu uso outra, ele muda o sinal porém ai as informações do outro item não fecham e ficam todos abertos (o que eu não quero):
      var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("active"); var collapse = this.nextElementSibling; if (collapse.style.display === "block") { collapse.style.display = "none"; } else { collapse.style.display = "block"; } } }  
      Meu HTML:
      <style> a.accordion { background: url(../img/pattern-1.png) repeat scroll 0 0 #eee; color: #444; cursor: pointer; padding: 18px; width: 96.5%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; margin-bottom:5px; } a.accordion.active, a.accordion:hover { background: #f3f3f3; } a.accordion.active::after { content: "\2212"; } a.accordion::after { content: '\002B'; font-size: 13px; color: #777; font-weight: bold; float: right; margin-left: 5px; } *, *::before, *::after { box-sizing: inherit; } .collapse { display: none; } .collapse.in { display: block; } tr.collapse.in { display: table-row; } tbody.collapse.in { display: table-row-group; } .collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: .35s; -o-transition-duration: .35s; transition-duration: .35s; -webkit-transition-property: height, visibility; -o-transition-property: height, visibility; transition-property: height, visibility; } </style> <section style="margin:0 auto;width:100%;display:inline-table;"> <a class="btn btn-block accordion" role="button" data-toggle="collapse" data-target="#BR-Ass" aria-controls="gestao"> Todos os Estados </a> <div class="collapse" id="BR-Ass" style="margin:0 auto; width:96.5%;"> informações Todos os Estados </div> <a class="btn btn-block accordion" role="button" data-toggle="collapse" data-target="#SP-Ass" aria-controls="gestao"> São Paulo </a> <div class="collapse" id="BR-Ass" style="margin:0 auto; width:96.5%;"> informações São Paulo </div> ... </section> Como faço o "sinal" mudar de mais para menos no javascript?
       
    • Por Abner Leiz Delgado
      Aqui está meu html: <div>
                  <ul class="nav navbar-nav menu">
                      <li style="margin-bottom: 60px">
                          <a data-submenu="submenu-usuario" data-areaname="Usuario" @(IIf(Html.ViewContext.RouteData.DataTokens("area") = "Usuario", "class=active", ""))>
                              <div id="messageNaoLidaDiv" class="profile-message-count" data-bind="style: { backgroundColor: QuantidadeMsgNaoLida() > 0 ? '#C00000' : 'transparent' }">
                                  <span data-bind="text: QuantidadeMsgNaoLida, visible: QuantidadeMsgNaoLida() > 0"></span>
                              </div>
                              <div class="profile-details">
                                  <div class="profile-photo">
                                      <img src="@Url.Action("Photo", "Account")" @(IIf(ViewBag.Usuario.Foto IsNot Nothing AndAlso ViewBag.Usuario.Foto.Length > 0, "", "style=visibility:hidden;")) />
                                  </div>
                                  <div @(IIf(Html.ViewContext.RouteData.DataTokens("area") = "Usuario", "class=profile-text-active", "class=profile-text"))>
                                      @*<span  style="font-size: 22px">@ViewBag.Usuario.NomeUsual</span><br/>*@
                                      @*<span>@ViewBag.Usuario.NivelDescricao</span>*@
                                  </div>
                              </div>
                          </a>
                      </li>
                      <li>@Html.AreaLink("Cadastro", "submenu-cadastro", "Cadastro")</li>
                      <li>@Html.AreaLink("Configuração", "submenu-configuracao", "Configuracao")</li>
                      <li>@Html.AreaLink("Financeiro", "submenu-financeiro", "Financeiro")</li>
                      <li>@Html.AreaLink("Relatório", "submenu-relatorio", "Relatorio")</li>
                      <li>@Html.AreaLink("Tarefa", "submenu-tarefa", "Tarefa")</li>
                  </ul>
              </div>
          </div>
      Aqui está meu css
      .menu {
          font-size: 28px;
          cursor: pointer;
      }
      /*Conteiner do menu*/
      .navbar-side {
          width: 190px;
          margin-left: -225px;
          left: 225px;
          position: fixed;
          height: 100%;
          z-index: 1000;
          background: #363636;
          border-right-width: 0;
      }
          .navbar-side .navbar-header {
              float: none;
              padding: 0;
          }
          .navbar-side .navbar-nav {
              float: none;
              margin: 0;
          }
              .navbar-side .navbar-nav > li > a {
                  display: inline-block;
                  width: 100%;
                  padding: 7px 20px;
                  font-size: 22px;
              }

                  .navbar-side .navbar-nav > li > a:hover, .navbar-side .navbar-nav > li > a:focus {
                      background: #454545;
                  }
                  .navbar-side .navbar-nav > li > a:active {
                      color: #00B0F0;
                  }
      Aqui está o javaScript:
      var currentArea = "@(Html.ViewContext.RouteData.DataTokens("area"))";
              $(function () {
                  $("#submenu div[data-submenu]").hide();
                  $(".menu a").click(function () {
                      $(".menu a").removeClass("active");
                      var idSubmenu = "#submenu [data-submenu=" + $(this).data("submenu") + "]";
                      if ($(idSubmenu).is(":hidden")) {
                          $(idSubmenu).show();
                          $(this).addClass("active");
                          $("#submenu div[data-submenu]:not(" + idSubmenu + ")").hide();
                      }
                      else {
                          $("#submenu div[data-submenu]").hide();
                          $(".menu a[data-areaname=" + currentArea + "]").addClass("active");
                      }
                  });
      Podem ajudar por favor?
       
    • Por matheusmarson
      Ola a todos
       
      Estou com uma dificuldade para fazer com que a mascara do campo mude de acordo com o tipo de documento do cliente
      E´o seguinte
      tenho um como que determina qual o tipo de cliente (cpf/cnpj)
      Dependendo do tipo de usuário o campo documento deve receber a mascara correspondente a este documento
      Estou usando o Jasny Bootstrap para as mascaras
      o meu código está assim:
      $(document).on("change", "#tipo_cliente", function() { var tipo = $(this).val(); if (tipo == "CNPJ"){ //$("#cpf").attr("data-mask", "99.999.999/9999-99"); $("#cpf").inputmask({mask: '99.999.999/9999-99'}); $("#cpf").attr("placeholder", "99.999.999/9999-99"); }else{ //$("#cpf").attr("data-mask", "999.999.999-99"); $("#cpf").inputmask({mask: '999.999.999-99'}); $("#cpf").attr("placeholder", "999.999.999-99"); } }); Alguém saberia me dizer porque não funciona
      Se escolher um tipo de cliente ele até altera a mascara, mas se eu escolher novamente a mascara não altera mais
       
      obrigado desde já
    • Por Marciano Franco
      Bom dia!
      Recomenda-se para o uso do bootstrap utilizar no html a tag <img> para chamar a imagem ou criar uma classe no css para utilizar de background?