JSFiddle - React, Tailwind, and code Playground

by Jesse M

HTML

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="element">
<p>
This is an element
</p>
</div>

JavaScript

var counted = false;
$(window).scroll(function() {
		if(counted == false){
        var top_of_element = $("#element").offset().top;
        var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
        var bottom_of_screen = $(window).scrollTop() + $(window).height();
        var top_of_screen = $(window).scrollTop();

        if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
            // The element is visible, do something
            alert('i see you O_o');
            counted = true;
        }
        else {
            // The element is not visible, do something else
        }
    }
});