Add class to element if it is in the viewport

by Zach Gover

HTML

<script src="https://cdn.jsdelivr.net/jquery.visible/1.1.0/jquery.visible.min.js"></script>
<div class="main">
    
</div>

<div class="body-main">
    
</div>

CSS

.main {
  background: #ff0000;
  height: 900px;
  width: 100%;
}

.body-main {
  background: green;
  height: 900px;
  width: 100%;
}

.think {
  background: #e3e3e3;
}

JavaScript

$(window).on("scroll", function(){
		// Determine if the element is in the viewport
		if($('.body-main:not(.think)').visible(true)) {
				$('.body-main').toggleClass("think");
		}
});