<div>
	Scroll
</div>

<div>
	Scroll
</div>

<div>
	Scroll
</div>

<article class="article">
	Article
</article>

<article class="excerpt visible">
	Excerpt
</article>
$blue: #2d3e50;
$green: #1bbc9b;
$red: #e64c66;
$white: #fff;

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

html {
	height: 100vh;
}

body {
	color: $white;
	text-align: center;
	background-color: $blue;
}

div,
.article {
	width: 100vw;
	padding: 141px 20px;
}

article {
	&.visible {
		background-color: $green;
	}

	&.hidden {
		background-color: $red;
	}
}

.article {
	transition: all 1s;
}

.excerpt {
	position: fixed;
	bottom: 0;
	width: 100vw;
	padding: 41px 20px;
	transition: all 0.5s;

	&.off-screen {
		bottom: -100px;
	}
}
View Compiled
function elementVisibility() {
	var inViewport = $('.article:in-viewport'),
		belowTheFold = $('.article:below-the-fold'),
		excerpt = $('.excerpt');

	inViewport.addClass('visible').removeClass('hidden');

	belowTheFold.addClass('hidden').removeClass('visible');

	if (inViewport.hasClass('visible')) {
		excerpt.addClass('off-screen');
	}

	if (belowTheFold.hasClass('hidden')) {
		excerpt.removeClass('off-screen');
	}
}

$(window).scroll(function () {
	elementVisibility();
});

$(window).resize(function () {
	elementVisibility();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js
  2. https://www.appelsiini.net/download/jquery.viewport.js