Tengo un menú creado con css y jQuery esta conformado con dos div: el primer div va a contener número de contacto y otros, el segundo div va a contener el menú de navegación.
El segundo div va a ser el div fijo, hasta aquí lo he logrado bien pero no me agrada mucho al bajar porque tiene un estilo como si se trancara.
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 40) $('#menu').addClass("fixed").fadeIn();
else $('#menu').removeClass("fixed");
});
});
#menu {
background-color: rgba(0, 0, 0, 0.1);
height: 72px;
width: 1349px;
}
.fixed {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 10000;
}
#area {
height: 800px;
}
#nav {
height: 24px;
width: 1349px;
background: #fbfbfb url(../img/grad.png) center top repeat-x;
padding: 6px 0;
border-bottom: 1px solid #eee;
}
li {
list-style: none;
}
.nav-user {
float: right;
padding: 10px 210px 0px 10px;
}
.shop-phone {
float: left;
padding: 15px 0px 0px 80px;
line-height: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<div id="nav">
<div class="shop-phone"><i class="icon-phone2"></i> 0123-456-789</div>
<div class="nav-user">
<!--<a href="cart.php"><i class="icon-cart"></i><span class="badge">0</span></a>-->Iniciar sesión</div>
</div>
<div id="menu">
</div>
<div class="slide">
<div class="slider-container">
<ul id="slider" class="slider-wrapper">
<li class="slide-current"><img src=""></li>
<li><img src=""></li>
</ul>
<ul></ul>
</div>
</div>
</div>
<div id="area">
</div>
<div id="footer">
<div id="footer-menu">
<div class="list-col-1"></div>
</div>
</div>
Aquí el link del código y el ejemplo funcionando https://jsfiddle.net/3dxmfejn/
Quiero eliminar ese pequeño detalle que sucede al bajar o al hacer el scroll, ese pequeño defecto que se ve como si se trancara.
Quiero lograr hacer el menú como el diseño de esta pagina este es el link http://www.global-seo.es/ si pueden observar el segundo div baja pero el efecto o la animación es muy diferente a mi diseño.