jQuery addClass example

Change class name on click in jQuery

HTML

<div style="height: 900px"></div>
<div class="container">
    <span class="white"></span>
</div>

CSS

div {background:#ed565d;}
.container {height:500px;width:100%;position:relative;}
.container span {display:block;}
.white {
  background:#ffffff;
  height:10px;
  width:10px;
  margin:-10px 0 0 -10px;
  border-radius:100%;
  position:absolute;
  top:50%;
  left:50%;
}
.grow {
    animation-name: grow;
    -webkit-animation-name: grow;
    width:300%;
    height:300%;
    top:-100%;
    left:-100%;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition:all 0.5s ease-out; 
}

JavaScript

$(window).scroll(function () {
    $('.white').each(function () {
        var imagePos = $(this).offset().top;
        var imageHeight = $(this).height();
        var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).addClass("grow");
        } else {
            $(this).removeClass("grow");
        }
    });
});