On Scroll Event Trigger on Viewport

by Dhruvang Gajjar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="Hello" id="a">
Hello
</div>
<div class="Hellohi" id="b">
Hello
</div>
<div class="Hello" id="c">
Hello
</div>
<div class="Hellohi" id="d">
Hello
</div>

CSS

.Hellohi{background-color:rgba(0,0,102,1);}
.Hello{background-color:rgba(153,0,51,1);}
div{height:600px;width:600px;}

JavaScript

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop() + $(window).height(); //pixels to scroll to top + height of visible window
    var elemTop = $(elem).offset().top; //pixels of the top of element from the start of page
    return (elemTop <= docViewTop);
}


var isFuncAlreadyFired = false;
$(window).scroll(function() {
    if(!isFuncAlreadyFired && isScrolledIntoView('#c'))
    {
        alert("Hello");
        isFuncAlreadyFired = true;
    }
});

isScrolledIntoView('#c');