After seeking inspiration from this specific thread on SO, I still need some help.
The challenge I'm facing involves displaying a sticky footer within a parent div that is positioned halfway down the page. I've tried multiple tutorials, but none have worked for me.
Here is the structure of the page:
HEADER
HERO
CONTENT RIGHT-SIDE(id="wrap-vs")
CONTENT-FULL-WIDTH
FOOTER
My goal is to only show the sticky div within the RIGHT-SIDE content when it is within the viewport. Since RIGHT-SIDE is not visible on page load and requires scrolling to reach, the sticky div should appear when it is in view and disappear when the user scrolls below it.
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>