<div id="slides-holder">
    <div class="slide" id="slide-1">
        <div class="fade-text">SLIDE 1</div>
    </div>
    <div class="slide" id="slide-2">
        <div class="fade-text">SLIDE 2</div>
    </div>
    <div class="slide" id="slide-3">
        <div class="fade-text">SLIDE 3</div>
    </div>
    <div class="slide" id="slide-4">
        <div class="fade-text">SLIDE 4</div>
    </div>
    <div class="slide" id="slide-5">
        <div class="fade-text">SLIDE 5</div>
    </div>
    <div class="slide" id="slide-6">
        <div class="fade-text">SLIDE 6</div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
#slides-holder,.slide{position:relative;width:100%}
	.slide,.slide.fixed{top:0;left:0;width:100%}
	body,html{margin:0;padding:0; color:#fff;}
	.slide{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-position:center center;background-repeat:no-repeat}
	.slide.fixed{position:fixed}
	.slide-fake-height{position:relative;display:none}
	.slide-fake-height.visible{display:block}
	.fade-text{display:inline-block;position:absolute;font-family:HelveticaNeue,helvetica,arial;font-size:60px;opacity:.2;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}
	.fixed .fade-text{opacity:1}
	#slide-1{background-image:url(https://res.cloudinary.com/dzpv5gmyw/image/upload/v1468502671/demo/img7.jpg)}
	#slide-1 .fade-text{left:5%;top:40%}
	#slide-2{background-image:url(https://res.cloudinary.com/dzpv5gmyw/image/upload/v1468502667/demo/img8.jpg)}
	#slide-2 .fade-text{left:5%;top:40%}
	#slide-3{background-image:url(https://res.cloudinary.com/dzpv5gmyw/image/upload/v1468502664/demo/img1.jpg)}
	#slide-3 .fade-text{color:#fff;left:5%;top:20%}
	#slide-4{background-image:url(https://res.cloudinary.com/dzpv5gmyw/image/upload/v1468502657/demo/img4.jpg)}
	#slide-4 .fade-text{left:5%;top:10%}
	#slide-5{background-image:url(https://res.cloudinary.com/dzpv5gmyw/image/upload/v1468502670/demo/img3.jpg)}
	#slide-5 .fade-text{left:5%;top:5%}
	#slide-6{background-image:url(https://res.cloudinary.com/dzpv5gmyw/image/upload/v1468502671/demo/img2.jpg)}
	#slide-6 .fade-text{color:#fff;left:5%;top:10%}

var $window = $(window);
var $holder = $("#slides-holder");
var $slides = $holder.find(".slide");

$slides.each(function(index, element) {
	$(element).css("z-index", 100 + index).after($("<div />", {
		class: "slide-fake-height"
	}));
});

var $fakeHeights = $slides.next(".slide-fake-height");
var $toReize = $holder.add($slides).add($fakeHeights);
var scrollFixer = 3;

$window.on("resize", onResize).resize();

$window.on("scroll", function(event) {
	( !! window.requestAnimationFrame) ? requestAnimationFrame(onScroll) : onScroll();
});

function onResize(event) {
	$toReize.css({
		height: $window.innerHeight() + "px"
	});
	onScroll();
}

function onScroll(event) {
	
  var scrollTop = Math.abs($window.scrollTop()) + scrollFixer;
	
  $slides.each(function(index, element) {
		
		var $slide = $(element);
		var $fakeHeight = $slide.next(".slide-fake-height");
		
		//This can be optimised a lot, but this is just a demo effect
		var slideTop = $slide.hasClass("fixed") ? $fakeHeight.offset().top : $slide.offset().top;
		if (slideTop < scrollTop ) {
			$slide.addClass("fixed");
			$fakeHeight.addClass("visible");
		} else {
			$slide.removeClass("fixed");
			$fakeHeight.removeClass("visible");
		}
	});
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.