[Parallax footer] by Austin Paquette https://codepen.io/pqt/pen/bNByOj #css #javascript

parallaxFooter.css

#site-content {
	min-height: 100%;
	min-height: 100vh;
	padding-top: 65px;
	position: relative;
	z-index: 1;

	-webkit-box-shadow: #000 0 7px 35px 0;
	-moz-box-shadow: #000 0 7px 35px 0;
	box-shadow: #000 0 7px 35px 0;
  
}

#site-footer {
	padding: 25px 0;
	font-size: 85%;
	background-color: #2A2A2A;
	position: fixed;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: 0;
}

parallaxFooter.js

$(document).ready(function() {
	
	// INITIATE THE FOOTER
  siteFooter();
	// COULD BE SIMPLIFIED FOR THIS PEN BUT I WANT TO MAKE IT AS EASY TO PUT INTO YOUR SITE AS POSSIBLE
	$(window).resize(function() {
		siteFooter();
	});
	
	function siteFooter() {
		var siteContent = $('#site-content');
		var siteContentHeight = siteContent.height();
		var siteContentWidth = siteContent.width();

		var siteFooter = $('#site-footer');
		var siteFooterHeight = siteFooter.height();
		var siteFooterWidth = siteFooter.width();

		console.log('Content Height = ' + siteContentHeight + 'px');
		console.log('Content Width = ' + siteContentWidth + 'px');
		console.log('Footer Height = ' + siteFooterHeight + 'px');
		console.log('Footer Width = ' + siteFooterWidth + 'px');

		siteContent.css({
			"margin-bottom" : siteFooterHeight + 50
		});
	};
});