Ir para conteúdo
    • João Batista Neto

      iMasters InterCon 2017   10-10-2017

      Ainda dá tempo de se inscrever no iMasters InterCon 2017, o maior evento dev do Brasil!  
Entre para seguir isso  
marcelobbt

Menu parar no topo da página ao rolar scrol

Recommended Posts

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.

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

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.

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  

  • Próximos Eventos

  • Conteúdo Similar

    • Por Jesse&Francinete
      Código:
       
      <?php error_reporting(0); if(!isset($_SESSION)) session_start(); //Login de Usários if(isset($_POST['login'])) { include('app/ad.class.php'); $senha = $_POST['senha']; $usuario = $_POST['usuario']; if ((isset($_POST['usuario'])) and (isset($_POST['senha']))) { $ldap = new ldap('LDAP://172.16.0.2'); if ($ldap->autentica($_POST['usuario'], $_POST['senha'])) { $_SESSION['usuario'] = $usuario; $_SESSION['senha'] = $senha; $_SESSION['nome'] = $ldap->busca_nome($usuario); header("Location: index.php"); } else { unset($_SESSION['usuario']); unset($_SESSION['senha']); //Aqui é para chamar o modal no caso de else, mas não chama, meu modal foi setado lá embaixo! echo '<script> $("#myModal").modal("show");</script>'; } } } ?> <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Pesquisa Terra Santa Agro S.A.</title> <link rel="icon" href="img/site/favicon.ico"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/sb-admin-2.css" rel="stylesheet"> </head> <script> $('#myAlert').on('closed.bs.alert', function () { $(".alert").fadeTo(500, 0).slideUp(500, function(){ $(this).remove(); }) }) </script> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="login-panel panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Autenticação</h3> </div> <div class="panel-body"> <form method="POST" action="" role="form"> <fieldset> <div class="input-group"> <input value="<?php if(isset($_SESSION['usuario'])) echo $_SESSION['usuario']; ?>" class="form-control" placeholder="Insira seu usuário..." name="usuario" required type="text" autofocus> <span class="input-group-addon" id="basic-addon2">@tsagro.com</span> </div><br> <div class="form-group"> <input class="form-control" required placeholder="Insira sua senha..." name="senha" type="password" value=""> </div> <div class="alert alert-info alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <strong>Nunca</strong> deixe sua senha salva. Por motivos de facilidade, deixaremos seu usuário salvo caso retorne. </div> <button type="submit" name="login" value="true" class="btn btn-success btn-block">Entrar <span class="glyphicon glyphicon-log-in"></span> </button> </fieldset> </form> </div> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script src="js/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script> <script src="js/bootstrap.min.js"></script> <script src="js/ie10-viewport-bug-workaround.js"></script> </body> </html>  
    • Por hyper_pixel
      Vi algumas estruturas bootstrap onde nas div se usava mais de uma marcacao de coluna ex:
      <div class="col-sm-4 col-xs-8 col-md-12"></div>  
      Qual resultado disso? pelo que entendi são pra varias resoluções por que nao usar media queries?
    • Por MateusFreitas01
      Olá. Estou com um trabalho, e recentemente o menu dropdown do Bootstrap vem apresentando um problema. Quando eu abro a página, ele funciona normalmente, porém, se atualizar ele apresenta um problema bem estranho, provavelmente é javascript (pelo que verifiquei), mas não tenho noção de como resolver. Segue as imagens do menu funcionando e dando problema: 

    • Por MateusFreitas01
      Olá. Estou com um trabalho, porém existe um problema na configuração de tablet, onde o body não ocupa todo o comprimento. Porém não tenho ideia do que seja. (Não estou conseguindo fazer upload da imagem). O problema vai de 768px até 1124px.
      Link para a imagem: https://drive.google.com/open?id=0B4wD-Zk-3he2ODRyT0pyV1gydGc
      Obrigado!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: