display sticky div if within viewport

I am basing my code off of this thread Displaying a div once its within the viewport

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 parent div. I have tried 4 different tutorials so far with no luck.

page structure is this

HEADER

HERO

CONTENT RIGHT-SIDE(id=”wrap-vs”)

CONTENT-FULL-WIDTH

FOOTER

So 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 to sticky div to go away.

This is my code so far

//HTML
<div id="wrap-vs">
    <div class="tabs">
        right-side content sticky div
    </div>
</div>
 
//CSS
#wrap-vs{
    height: 100%;
    background-color: yellow;
}

.tabs {
    position: fixed;
    bottom: 0;
}

// JS

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);
    });