Necesito hacer un menú de navegacion sticky (pegajoso) para usarlo en el header de mi tema wordpress. El menú tiene que desaparecer cuando bajes el scroll del raton y aparecer al subir. El problema es que cualquier imagen de mis paginas bajando o subiendo el scroll se sobreponen por encima y no se quedan por abajo.
La estructura de el archivo header.php es la siguiente:
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">página1</a></li>
<li><a href="#">página2</a></li>
<li><a href="#">página3</a></li>
<li><a href="#">página4</a></li>
</ul>
</div>
</nav>
</header>
Código Jquery:
(function( $ ) {
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
})( jQuery );
alguien tiene alguna sugerencia?