<div id="wrap">

	<!-- section -->
	<div class="section">
		<div class="center">

			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>
			<div class="block">Fade out</div>

		</div>
	</div>
	<!--/section -->

</div>
html,
body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #555;
	background: #fff;
}

* {
	box-sizing: border-box;
}

#wrap {
	position: relative;
}

.section {
	padding: 40px;
}

.center {
	width: 100%;
	max-width: 980px;
	margin: auto;
}

.block {
	width: 200px;
	height: 200px;
	background: #000;
	margin: 0 auto 20px;
	line-height: 200px;
	text-align: center;
	color: #fff;
	transition: opacity .4s ease;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.disappear {
	opacity: 0;
}
View Compiled
function fadeOutBlocks(elem, tolerance = 0) {
	var winScroll = $(window).scrollTop() + tolerance;
	
	elem.each(function() {
		var $elem = $(this),
			elemTop = $elem.offset().top;
		
		
		if(winScroll > elemTop) {
			$elem.addClass('disappear');
		} else {
			$elem.removeClass('disappear');			
		}
	});
	
}

$(window).on('load scroll', function () {
	//	tolerance -- отступ сверху, если нужно, чтобы элемент исчезал раньше, по умолчанию 0
	fadeOutBlocks($('.block'), 50);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js