JSFiddle - React, Tailwind, and code Playground

HTML

<header id="masthead" class="imageBadge" role="banner">
    <p class="textBadge">My Header text</p>
</header>
<div class="mainContent" role="main">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</br>
    sed diam nonumy eirmod tempor invidunt ut labore et dolore</br>
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam</br>
    et justo duo dolores et ea rebum. Stet clita kasd gubergren,</br>
    no sea takimata sanctus est Lorem ipsum dolor sit amet.</br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</br>
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</br>
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores</br>
    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus</br>
    est Lorem ipsum dolor sit amet.
</div>
<footer class="footerContainer">
<div class="footer" role="contentinfo">
    I am the footer!
</div>
</footer>

CSS

.imageBadge {
  background-attachment:fixed;
  background-image:url(http://upload.wikimedia.org/wikipedia/commons/e/ec/Wikipedia-logo-v2-de.png);
  min-height: 100px;
}
.textBadge {
  position:fixed;
}
.mainContent {
  z-index: 2;
  position: relative;
  background-color: #FFF;
  width:100%;
}
.footerContainer {    
  height:50px;
}
.footer {
  position:fixed;
  bottom:0px;
  padding: 10px 0px;
  z-index:0;
  width:100%;
  background-color: #F00;
}

JavaScript

(
function () {
	var a = document.getElementById("masthead"),
		e = $(window);
	e.unbind("scroll").scroll(function () {
		a.style.backgroundPosition =  "center "+ -(e.scrollTop()/ 9) + "px";
	});
}