Question

0

202

Vistas

Ocultar la navegación cuando esté en la parte superior

Hola, ¿cómo puedo ocultar mi navegación cuando no me desplazo y mostrarla cuando me desplazo?

estoy usando dos menús en este enlace http://dev.thegabrielmethod.com/gabriel/

uno en un fondo blanco y el otro en un fondo azul

me gustaría ocultar los elementos del menú de navegación en el fondo blanco cuando no se desplaza y luego mostrarlos nuevamente cuando se desplaza

Esto es lo que estoy intentando que no funciona.

 <script type='text/javascript'>//<![CDATA[ $(document).ready(function() { var headerTop = $('#header').offset().top; var headerBottom = headerTop + 120; // Sub-menu should appear after this distance from top. $(window).scroll(function () { var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top if (scrollTop > headerBottom) { // Check to see if we have scrolled more than headerBottom if (($("#navigation-alongside").is(":visible") === false)) { $('#navigation-alongside').fadeIn('slow'); } } else { if ($("#navigation-alongside").is(":visible")) { $('#navigation-alongside').hide(); } } }); }); </script>

Por favor algún consejo

about 4 years ago · Santiago Trujillo

3 Respuestas

Responde la pregunta

0

 $(document).ready(function() { $(window).scroll(function() { $(".menu").css({ 'display': 'none' }); clearTimeout($.data(this, 'scrollTimer')); $.data(this, 'scrollTimer', setTimeout(function() { $(".menu").css({ 'display': 'block' }); }, 100)); }); });

 .menu { position: fixed; display: block; width: 100%; height: 150px; margin: 0px !important; box-shadow: 0 2mm 10px #aaa; text-align: center; } body { padding: 0px !important; height: 200vh; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="menu"><br/> <h1>Menu Box</h1> </div> </body>

¡Aquí! No mostrará el menú mientras se desplaza... y lo volverá a mostrar cuando finalice el desplazamiento.

Por favor, informe si he malinterpretado su pregunta.

about 4 years ago · Santiago Trujillo Denunciar

0

Una forma de hacerlo es la siguiente:

 window.onscroll = function(e) { topMenu = document.querySelector('.banner.include-nav'); scrollTopAmount = document.body.scrollTop; if (scrollTopAmount != 0) { topMenu.style.display = 'none'; } else topMeny.style.display = 'block'; }

Espero que esto ayude

about 4 years ago · Santiago Trujillo Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-06-13T20:58:52.828Z

Observé tu html también. y encontré algún problema. primero es: ha establecido el margen para la barra de navegación blue - margin-top: 100px; eso no es necesario.

y ejecutar el siguiente código.

abra ese sitio y abra la herramienta de desarrollo> en la consola, ejecute el siguiente código, luego desplace la página, verá que funciona como se esperaba.

Solo necesita ejecutar el siguiente código en la carga de la página, y también manejará el problema del margen en la segunda línea.

 jQuery('.banner.include-nav').fadeOut(); jQuery('.nav-bar-below.op-page-header.cf').css({'margin':'0px'}); var h = jQuery('.nav-bar-below.op-page-header.cf').height(); jQuery(window).scroll(function () { if(jQuery(window).scrollTop() > h) { jQuery('.banner.include-nav').fadeIn(); } else { jQuery('.banner.include-nav').fadeOut(); } })

Antes de desplazarse

Cuando desplazarse

Actualizar

Según tu comentario, te entendí, en blanco solo querías ocultar el menú, no el logotipo en sí. prueba el siguiente código. como te dije arriba ahora.

 jQuery('.banner.include-nav > .fixed-width.cf > .sixteen.columns').fadeOut(); //jQuery('.nav-bar-below.op-page-header.cf').css({'margin':'0px'}); var h = jQuery('.nav-bar-below.op-page-header.cf').height(); jQuery(window).scroll(function () { if(jQuery(window).scrollTop() > h) { jQuery('.banner.include-nav > .fixed-width.cf > .sixteen.columns').fadeIn(); } else { jQuery('.banner.include-nav > .fixed-width.cf > .sixteen.columns').fadeOut(); } })

0

202

Ocultar la navegación cuando esté en la parte superior

3 Respuestas

0

0

0

Encuentra empleos remotos

Andres GPT