El elemento my-div tiene una posición absoluta. Cuando se desplaza por la página, tan pronto como my-div está fuera del puerto de vista, su posición cambia a fija y superior: 0. Aquí necesito cambiar el valor 0 para la parte superior a 100px.
Logré hacerlo usando el método onscroll de la siguiente manera:
document.onscroll = function(){ const myDiv = document.querySelector('.my-div') if(myDiv && myDiv.style.position == 'fixed') { myDiv.style.top = '100px'; } }El código anterior está funcionando. Sin embargo, el problema con este código es que se activa en cada evento de desplazamiento y es malo para el rendimiento. Ahora estoy tratando de usar el método intersecciónObserver en lugar del método onscroll.
Lo que necesito es: tan pronto como my-div no esté en la ventana gráfica y su posición sea fija, agregue los 100px principales.
Intenté esto:
const myDiv = document.querySelector('.my-div'); if (myDiv) { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting === false && myDiv.style.position == 'fixed') { myDiv.style.top = '100px'; observer.unobserve(entry.target); } }); }); observer.observe(myDiv); }Pero no está funcionando.
Si desea verificar si una entrada ya no está en la ventana gráfica, use la propiedad .intersectionRatio , si el valor es 0, entonces no está en la ventana gráfica:
if (entries[0].intersectionRatio <= 0) { En el ejemplo a continuación, desplácese hacia abajo y una vez que el cuadrado rojo ya no esté en la ventana gráfica, se quedará atascado a 100 px desde la parte superior de la ventana gráfica. También se agregó un fondo semitransparente para servir como un estilo fácilmente perceptible que confirma que el código funciona según lo solicitado (es decir, cambia los estilos de un <div> una vez que ya no está dentro de la ventana gráfica).
const X = document.querySelector('.X'); const obr = new IntersectionObserver(function(entries) { if (entries[0].intersectionRatio <= 0) { X.style.cssText = `position: fixed; top: 100px; background: rgba(255, 36, 0, 0.3)`; this.unobserve(X); } }); obr.observe(X); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } html, body { width: 100%; min-height: 100% } html { font: 5vmax/1.375 Consolas; scroll-behavior: smooth; } main { position: relative; width: 100vw; height: 300vh; overflow-y: scroll; } .X { position: absolute; top: calc(50vh - 2.25rem); left: calc(50% - 2.25rem); z-index: 1; width: 4.5rem; height: 4.5rem; border: 5px groove tomato; border-radius: 0.5rem; text-align: center; } a { display: inline-block; position: absolute; width: max-content; margin: 0 5px; font-size: 1.5rem; } #top { top: 0; right: 0; } #top+a { top: 0; left: 0 } #mid { top: calc(150vh - 2.25rem); left: calc(50% - 2.25rem); width: 4.5rem; height: 4.5rem; font-size: 3rem; } #mid+a { bottom: 0; left: 0 } #sub { bottom: 0; right: 0; } <main> <a href='#sub' id='top'>SUB</a> <a href='#mid'>MID</a> <div class='X'></div> <a id='mid'>❌</a> <a href='#mid'>MID</a> <a href='#top' id='sub'>TOP</a> </main>