Ir ao conteúdo
  • Cadastre-se
carecazn

Rolar a pagina e fixar o menu

Recommended Posts

     Boa tarde Pessoal, estou tentando rolar a pagina e quando chegar e um determinado número de pixels ele trava o menu no topo, essa parte eu consegui fazer, o problema ocorre quando fixa o menu no topo, quando isso acontece ele joga o slide para cima.

 

     Então quando fixa o menu o slide aparece na metade já, podem me ajudar a resolver este problema por favor.

 

Segue o site que estou tentando fazer o menu ficar igual http://rethguarulhos.com.br/

 

Segue o código na página.

<script>
		$(function(){   
			var nav = $('#menu');   
			$(window).scroll(function () { 
				if ($(this).scrollTop() > 50) { 
					nav.addClass("fixar"); 
				} else { 
					nav.removeClass("fixar"); 
				} 
			});  
		});
	</script>
<style type="text/css">
	body {padding-top: 80px;}
</style>
<div id="menu" class="jumbotron p mr">
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default">

<div class="col-md-9" style="float:none; margin: 0 auto !important;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
	<a href="?pg=home"><img src="img/logo.png" class="img-responsive" alt="Logo: <?php echo EMPRESA ?>"></a>
	
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	</button>
	
		<!--<a class="navbar-brand" href="?pg=home" title="" id="Home">Home</a>-->
</div><!--Fim da DIV navbar-header-->


<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="?pg=home" title="" id="Home">Home</a></li>
<li><a href="?pg=quem_somos" title="" id="quem_somos">Quem somos</a></li>
<li><a href="?pg=servicos" title="" id="servicos">Servi&ccedil;os</span></a></li>
<li><a href="?pg=legislacao" title="" id="legislacao">Legisla&ccedil;&atilde;o</a></li>
<!--<li><a href="consultorio/index.php" title="" id="consultorio">Consult&oacute;rio</a></li>-->
<li><a href="?pg=contato" title="" id="contato">Contato</a></li>
</ul>	
</div><!-- /.navbar-collapse -->
</div>

</nav>
</div><!--Fim da DIV row-->
</div><!--Fim da DIV container-fluid-->
</div><!--Fim da DIV jumbotron-->
<?php require_once "slide/slide.php"; ?>



Aqui o CSS

.fixar {position: fixed;top: 0;z-index:99;width: 100%; height: 110px; clear: both;
box-shadow: 0px 0px 1.5em #000;-webkit-box-shadow: 0px 0px 1.5em #000;-moz-box-shadow: 0px 0px 1.5em #000;}

     Esta funcionando, porém, como eu disse, no momento em que fixa o menu o slide já aparece na metade do slide.

 

     Eu preciso que fique igual ao site de exemplo, no momento que fixar o menu o slide apareça logo abaixo, inteiro e conforme a página vai subindo ele entra debaixo.

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





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×