Soy un diseñador gráfico con un poco de conocimiento de código... pero esto me está volviendo loco...
Obtuve una barra de navegación clásica que está oculta a menos que el usuario se desplace un poco hacia abajo. Obtuve esta acción con javascript. ESTÁ BIEN.
Pero quiero que esto suceda (la acción de mostrar la barra de navegación) solo en el medio de cada página. Como 100 px de la parte superior y 100 px de la parte inferior del desplazamiento. La razón es que tengo migas de pan en la parte superior y el pie de página en la parte inferior de la página, no necesito la barra de navegación allí.
Hice lo mejor que pude para mezclar lo que obtuve (la barra de navegación) con algunos detectores de desplazamiento, o barras de lectura que obtienen la posición de desplazamiento... pero fue imposible hacer que algo funcionara...
¿alguna ayuda por favor?
Mi código es este en este momento, solo la barra de navegación (las mejoras también son bienvenidas... jeje):
var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.bottom = "0"; } else { document.getElementById("navbar").style.bottom = "-100px"; } prevScrollpos = currentScrollPos; }Si te entendí bien, creo que quieres algo como esto:
window.onscroll = () => { const scrollPos = window.scrollY; const offset = 100; const targetEl = document.body; //Adjust to preference if(scrollPos > offset && (targetEl.scrollHeight - window.innerHeight - scrollY) > offset ) console.log('shownavbar') else console.log('hidenavbar') }Lo tengo gracias a @NourAshraf. Hice algunos cambios con el código que obtuve antes y el tuyo. Ahora funciona perfecto!
Solo si alguien lo necesita finalmente es algo como esto. Para comprobarlo más fácilmente puse a cambiar el color del cuerpo a verde (cuando debería mostrarse la barra de navegación) y rojo (cuando no debería aparecer).
var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; var offset = 500; const targetEl = document.body; //Adjust to preference if (prevScrollpos > currentScrollPos && currentScrollPos > offset && (targetEl.scrollHeight - window.innerHeight - scrollY) > offset) { document.body.style.backgroundColor = "green"; } else { document.body.style.backgroundColor = "red"; } prevScrollpos = currentScrollPos; }