Rolar a pagina e fixar o menu

[carecazn]

     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.