Trigger event when user scroll to specific element

jQuery

by Hrvoje

HTML

<div style="height: 1000px; position: relative;"> </div>
		
		<div id="scroll-to" class="container">
			<div id="box1" class="box left left-move">
				// code
			</div>
		
			<div id="box2" class="box center center-move">
				// code
			</div>
		
			<div id="box3" class="box right right-move">
				// code
			</div>
		</div>
	
		<div style="height: 1000px; position: relative;"> </div>

CSS

.container {
				width:1000px;
				margin: 0 auto;
				position: relative;
				height:550px;
			}
			.box {
				width: 33%;
				height: 550px;
				float: left;
				color: blue;
				-webkit-transition: 3s;
				transition: 3s;
				position: absolute;
				opacity: 1;
			}
			
			.left {
				background-color: #ff0000;
				left: 0;
			}
			
			.center {
				background-color: #ffff00;
				left: 50%;
				margin-left: -165px;
				top:0;
			}
			
			.right {
				background-color: #000000;
				right: 0;
			}
			
			.left-move {
				left: -400px;
				opacity: 0;
			}
			
			.right-move {
				right: -400px;
				opacity: 0;
			}
			
			.center-move {
				opacity: 0;
				top: 0;
			}

JavaScript

$(window).scroll(function() {
			   var hT = $('#scroll-to').offset().top,
				   hH = $('#scroll-to').outerHeight(),
				   wH = $(window).height(),
				   wS = $(this).scrollTop();
			   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
				  document.getElementById("box1").classList.remove('left-move');
				  document.getElementById("box2").classList.remove('center-move');
				  document.getElementById("box3").classList.remove('right-move');
			   } else {
				  document.getElementById("box1").classList.add('left-move');
				  document.getElementById("box2").classList.add('center-move');
				  document.getElementById("box3").classList.add('right-move');
			   }
			});