Tengo un div que tiene un menú en Elementor. Voy a esconderme entre mi navegación y después de llegar al 80 % de la página, básicamente mi pie de página. La razón por la que hago esto es para evitar que interfiera con el pie de página.
Encontré algunos códigos e hice el mío, pero básicamente me escondí en la primera parte:
y > PER Y NO PUEDO PONER ESTA PARTE EN FUNCIONAMIENTO y < PER2
https://codepen.io/diogomaa/pen/JjMRgJL
//PER is Percentage value var PER = 45; var PER2 = 60; var yInPixel, totalHeight; //If page if with dynamic height change totalHeight and yInPixel after Resize Event $(document).ready(function() { totalHeight = $(this).height(); yInPixel = totalHeight * (PER / 100) - window.innerHeight; }); $(document).scroll(function() { var y = $(this).scrollTop(); if (y > yInPixel) { $('.bottomMenu').fadeIn(); if (y > PER && y < PER2 ) { document.getElementById("bottomMenu").style.visibility = "visible"; } } else{ $('.bottomMenu').fadeOut(); } }); body { height: 1600px; } .bottomMenu { display: none; position: fixed; bottom: 0; width: 100%; height: 60px; border-top: 1px solid #000; background: red; z-index: 1; } <div class="bottomMenu"> <a> menu </a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>¿Alguna idea?
Si tus preocupaciones son:
Puedo sugerir una solución elegante de hacer que el menú aparezca al desplazarse hacia arriba y desaparezca al desplazarse hacia abajo. Cada vez que el usuario desee acceder al menú, un inicio de desplazamiento hacia arriba (el reflejo suele ser subir al menú de todos modos) expondrá el menú. Los pies de página, ubicados en la parte inferior de una página web, deben desplazarse hacia abajo para llegar, lo que oculta naturalmente el menú en el proceso.
var lastY = 0; $('.bottomMenu').fadeIn(); //If page if with dynamic height change totalHeight and yInPixel after Resize Event $(document).scroll(function() { const y = $(this).scrollTop(); if (y < lastY) $('.bottomMenu').fadeIn(); else $('.bottomMenu').fadeOut(); lastY = y; }); body { height: 1600px; } .bottomMenu { display: none; position: fixed; bottom: 0; width: 100%; height: 60px; border-top: 1px solid #000; background: red; z-index: 1; } <div class="bottomMenu"> <a> menu </a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>He publicado otra respuesta con una sugerencia, pero creo que esta es la solución real que está buscando.
document.getElementById("bottomMenu").style.visibility = "visible"; a $('.bottomMenu').fadeIn(); . Esto es esencialmente lo que está tratando de hacer, pero bottomMenu es una clase, no una identificación, que es lo que requeriría document.getElementById .scrollTop sin procesar, que están en píxeles, con porcentajes. Primero debe obtener el porcentaje y luego comparar manzanas con manzanas. //PER is Percentage value var PER = 45; var PER2 = 60; var yInPixel, totalHeight; //If page if with dynamic height change totalHeight and yInPixel after Resize Event $(document).ready(function() { totalHeight = $(this).height(); yInPixel = totalHeight * (PER / 100) - window.innerHeight; }); $(document).scroll(function() { const y = $(this).scrollTop(), totalHeight = $(this).height(), curPercent = (y / totalHeight) * 100; if (curPercent > PER && curPercent < PER2 ) { $('.bottomMenu').fadeIn(); } else{ $('.bottomMenu').fadeOut(); } }); body { height: 1600px; } .bottomMenu { display: none; position: fixed; bottom: 0; width: 100%; height: 60px; border-top: 1px solid #000; background: red; z-index: 1; } <div class="bottomMenu"> <a> menu </a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>