FadeIn on Scroll (jQuery)

Used to answer a question on StackOverflow.

HTML

<div class="header"></div>
<div class="menu">
	<div class="fade">Fade In 01</div>
	<div class="fade">Fade In 02</div>
	<div class="fade">Fade In 03</div>
	<div class="fade">Fade In 04</div>
	<div class="fade">Fade In 05</div>
	<div class="fade">Fade In 06</div>
	<div class="fade">Fade In 07</div>
	<div class="fade">Fade In 08</div>
	<div class="fade">Fade In 09</div>
	<div class="fade">Fade In 10</div>
	<div class="fade">Fade In 11</div>
	<div class="fade">Fade In 12</div>
	<div class="fade">Fade In 13</div>
	<div class="fade">Fade In 14</div>
	<div class="fade">Fade In 15</div>
	<div class="fade">Fade In 16</div>
	<div class="fade">Fade In 17</div>
	<div class="fade">Fade In 18</div>
	<div class="fade">Fade In 19</div>
	<div class="fade">Fade In 20</div>
</div>

CSS

body {
  overflow-x: hidden;
  overflow-y: hidden;
}
.header {
  height: 40px;
}
.menu {
  position: relative;
  width: 90vw;
  height: 80vh;
  margin: auto;
  border: 2vw 3vh;
  overflow-x: hidden;
  overflow-y: scroll;
}
.fade {
  position: relative;
  height: 50px;
  margin: 10px 5px;
  padding: 10px 5px;
  background-color: lightgreen;
  opacity: 1;
}

JavaScript

$(window).on("load",function() {
	$(".menu").scroll(function() {
		$(".fade").each(function() {
			//find relative positions
			var objectTop = $(this).position().top;
			var objectBottom = objectTop + $(this).outerHeight();
			var parentTop = $(this).parent().scrollTop();
			var parentBottom = parentTop + $(this).parent().innerHeight();

			if (objectBottom < parentBottom) { //object comes into view (scrolling down)
				if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
			} else { //object goes out of view (scrolling up)
				if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
			}



			if (objectTop < windowTop) {//fade out on leaving top of scrollable area
				if ($(this).css("opacity")==1) {
					$(this).fadeTo(500,0);
				}
			} else if (objectBottom < windowBottom && objectTop > windowTop) {//fade in on entering top of scrollable area
				if ($(this).css("opacity")==0) {
					$(this).fadeTo(500,1);
				}
			} else if (objectBottom < windowBottom) {//fade in on entering bottom of scrollable area
				if ($(this).css("opacity")==0) {
					$(this).fadeTo(500,1);
				}
			} else {
				if ($(this).css("opacity")==1) {//fade out on leaving bottom of scrollable area
					$(this).fadeTo(500,0);
				}
			}



		});
	}).scroll(); //invoke scroll-handler on page-load
});