JSFiddle - React, Tailwind, and code Playground

by Sunny SM

HTML

<div id="wrapper">
    <div id="tester">
        <iframe src="http://www.proofhub.com" name="adsys-ad-67" id="adsys-ad-67" width="100%" height="300" ></iframe>
    </div>
</div>

CSS

body, html {
    height: 100%;
}

#wrapper {
    height: 400%;
    background: none repeat scroll 0 0 #f44 ;
}

#tester {
    position: relative;
    top: 40%;
    left: 10%;
    width: 300px;
    height: 300px;
    background: none repeat scroll 0 0 #fff;
    border: 5px solid black;
}

JavaScript

(function(){
	var flag = true;
    if (checkVisible($('#adsys-ad-67'))) {
    	//alert("Ad is visible 1");
        if(flag){
        	$('#wrapper').css("background-color", "#4f4");
            flag = false;
        }else { console.log("Already seen resfrsh to screen to see again"); }
    }else{
        if($(window).scroll()){
            $(window).scroll(function() {
                if (checkVisible($('#tester'))) {
                    if(flag){
                        $('#wrapper').css("background-color", "#4f4");
                        flag = false;
                    }else { console.log("Already seen resfrsh to screen to see again"); }
                }else{
                    $('#wrapper').css("background-color", "green");
                }
            });
        }
    }
    
    function checkVisible( elm, eval ){
         try{
            eval = eval || "visible";
            var vpH = $(window).height(), // Viewport Height
                st = $(window).scrollTop(), // Scroll Top
                y = $(elm).offset().top,
                elementHeight = $(elm).height(),
                half = elementHeight/2;
                if (eval == "visible") return (((y+half) < (vpH + st)) && ((y-half) > (st - elementHeight)));
                //if (eval == "above") return ((y < (vpH + st)));
        }catch(err){ console.log("ERROR : inscreen " + err.message); }
    }
    
    /*function checkVisible( elm, eval ){
         try{
            eval = eval || "visible";
             var doc = document.documentElement;
             var docBody= document.body;
             var vpH = var h = window.innerHeight || doc.clientHeight || docBody.clientHeight; // Viewport Height
                st = window.scrollTop, // Scroll Top
                y = document.getElementById(elm).offsetTop,
                elementHeight = $(elm).height(),
                half = elementHeight/2;
                if (eval == "visible") return (((y+half) < (vpH + st)) && ((y-half) > (st -...