I am basing my code off of this SO thread.
I have a parent div that is half way down the page. Within that parent div I want to display a sticky footer div, but only when viewport is showing the parent div. I have tried 4 different tutorials so far with no luck.
The page structure is this:
HEADER
HERO
CONTENT RIGHT-SIDE(id="wrap-vs")
CONTENT-FULL-WIDTH
FOOTER
When RIGHT-SIDE is within view, I want to display a sticky div within it. You can't see RIGHT-SIDE when page loads, you need to scroll down to it. Also, when we are below it I want the sticky div to go away.
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>This is how I fixed it:
// 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>