Estoy basando mi código en este subproceso SO .
Tengo un div principal que está en la mitad de la página. Dentro de ese div principal, quiero mostrar un div de pie de página fijo, pero solo cuando la ventana gráfica muestra el div principal. He intentado 4 tutoriales diferentes hasta ahora sin suerte.
La estructura de la página es esta:
HEADER HERO CONTENT RIGHT-SIDE(id="wrap-vs") CONTENT-FULL-WIDTH FOOTERCuando RIGHT-SIDE está a la vista, quiero mostrar un div pegajoso dentro de él. No puede ver el LADO DERECHO cuando se carga la página, debe desplazarse hacia abajo. Además, cuando estamos debajo de él, quiero que desaparezca el div pegajoso.
var targetdiv = document.querySelector('.tabs'); console.log(targetdiv); targetdiv.style.display = "none"; function CheckIfVisible(elem, targetdiv) { var ElemPos = elem.getBoundingClientRect().top; targetdiv.style.display = (ElemPos > 0 && ElemPos < document.body.parentNode.offsetHeight) ? "block" : "none"; } window.addEventListener("onscroll", function() { var elem = document.querySelector('#wrap-vs'); CheckIfVisible(elem, targetdiv); }); #wrap-vs { height: 100%; background-color: yellow; } .tabs { position: fixed; bottom: 0; } <div id="wrap-vs"> <div class="tabs"> right-side content sticky div </div> </div>Así es como lo arreglé:
// Create a new observer var observer = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { // Log if the element and if it's in the viewport console.log(entry.isIntersecting); if(entry.isIntersecting == true){ document.querySelector('.tabs').style.display = 'block'; } else { document.querySelector('.tabs').style.display = 'none'; } }); }); // The element to observe var app = document.querySelector('#wrap-vs'); // Attach it to the observer observer.observe(app); #wrap-vs { height: 100%; background-color: yellow; } .tabs { position: fixed; bottom: 0; } <div id="wrap-vs"> <div class="tabs"> right-side content sticky div </div> </div>