Hola a todos, estoy remodelando la pagina web de la empresa donde trabajo, y queria hacer un menu como el de la web de TN (
http://tn.com.ar/), como veran en esa pagina hay un menu superior que al bajar queda fijo en la parte superior con unas dimensiones diferentes.
el codigo que estoy usando es el siguiente:
Código:
<header id="header">
<section id="header-top" class="menu clearfix">
ESTE ES EL MENU
</section>
<div class="wrapper-sticky">
<nav id="menu-sections" class="hidden">
ESTE ES EL NAVEGADOR
</nav>
</div>
</header>
En el head tengo el siguiente script:
Código:
<script type="text/javascript">
$(document).ready(function() {
var nav = $('.menu');
var pos = nav.offset();
$(window).on('scroll', function() {
if($(window).scrollTop() > pos.top + 180) {
nav.hide();
$('#menu-sections').removeClass('hidden');
$('#menu-sections').addClass('fixNav');
} else {
nav.show();
$('#menu-sections').addClass('hidden');
$('#menu-sections').removeClass('fixNav');
}
});
});
</script>
Con esto el logrado que al hacer scroll aparezca el navegador fijo en la parte superior...
pero lo que no logro hacer es que, al pasar el mouse por arriba de un boton del navegador (por ejemplo secciones en TN) se visualize el detallado de las secciones