JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="selectedElement"></div>
</div>

CSS

#selectedElement {
    margin-top: 1500px;
    background-color: red;
    height: 100px;
    width: 100px;
    opacity: 0;
    transition: opacity 5s;
}

JavaScript

function isElementVisible(elementToBeChecked)
{
    var TopView = $(window).scrollTop();
    var BotView = TopView + $(window).height();
    var TopElement = $(elementToBeChecked).offset().top;
    var BotElement = TopElement + $(elementToBeChecked).height();
    return ((BotElement <= BotView) && (TopElement >= TopView));
}
$(window).scroll(function () {

       isOnView = isElementVisible("#selectedElement");
       if(isOnView){
          console.log('The selected element is visible!');
       }else{ // If not visible
           
           $("#selectedElement").css("opacity", "1")
          console.log('oops, the selected elment might be hidden or does not exist');
       }
});