JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="navigationBar"></div>
<div class="contentFadeAway" id="cfa1"></div>
        <div class="contentFadeAway" id="cfa2"></div>
        <div class="contentFadeAway" id="cfa3"></div>
        <div class="contentFadeAway" id="cfa4"></div>
        <div class="contentFadeAway" id="cfa5"></div>
        <div class="contentFadeAway" id="cfa6"></div>
        <div class="contentFadeAway" id="cfa7"></div>
        <div class="contentFadeAway" id="cfa8"></div>
        <div class="contentFadeAway" id="cfa9"></div>
        <div class="contentFadeAway" id="cfa10"></div>

        
        <div class="contentArea">
                <div class="content"> 
                    <h3>content here:</h3>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat diam, vulputate eu vulputate id, vestibulum at dolor. Mauris scelerisque, tortor a commodo consectetur, odio lectus aliquam nibh, sit amet iaculis lectus felis eget elit. Quisque augue nisl, fringilla consectetur consectetur ut, malesuada vel quam. Nam nisi lacus, tincidunt eget faucibus vitae, aliquam non turpis. In elit quam, eleifend quis pulvinar ac, ornare eget metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non eros eu lacus bibendum gravida sed sit amet eros. Vestibulum eros justo, ullamcorper vitae dictum non, faucibus vel arcu. Sed euismod condimentum tortor et scelerisque. Fusce sed ante ut tellus rhoncus pellentesque eu eget lectus. Etiam vel lorem est. Ut adipiscing, quam at pulvinar pellentesque, ante urna tristique lacus, euismod elementum sapien nunc volutpat ipsum. Duis posuere orci libero, a scelerisque lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor, arcu quis ornare consequat, elit enim faucibus sem, quis placerat nibh felis vel justo. Donec pellentesque elit a urna ornare ut sagittis dolor ultricies.
                    <br><br><br>
                </div>
            </div> 
    ...

CSS

body {
  
    height: 100%;
    margin: 0px;
      
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/GoldenGateBridge-001.jpg/400px-GoldenGateBridge-001.jpg') fixed;
    background-size:cover;
    
}

.navigationBar {
    position: fixed;
    display: inline-block;
    width:100%;

    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/GoldenGateBridge-001.jpg/400px-GoldenGateBridge-001.jpg') fixed;
    background-size:cover;    
    height: 160px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    z-index: +1;
}

.contentFadeAway {
    display: block;
    position: fixed;
    top: 160px;

    padding: 0px;
    width: 100%;
    
    height: 5px;
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/GoldenGateBridge-001.jpg/400px-GoldenGateBridge-001.jpg') fixed;
    background-size:cover;
    z-index: +1;
}

#cfa1 {    top: 160px; opacity: 1; }
#cfa2 { top: 165px;    opacity: .9; }
#cfa3 {    top: 170px; opacity: .8; }
#cfa4 {    top: 175px; opacity: .7; }
#cfa5 {    top: 180px; opacity: .6; }
#cfa6 {    top: 185px; opacity: .5; }
#cfa7 {    top: 190px; opacity: .4; }
#cfa8 {    top: 195px; opacity: .3; }
#cfa9 {    top: 200px; opacity: .2; }
#cfa10 { top: 205px; opacity: .1; }


.contentArea {
    display: block;
    position: absolute;
    top: 160px;
    padding: 50px 0px;
    width: 100%;
    
    min-height: 500px;
    height: auto;
}

.content {
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/GoldenGateBridge-001.jpg/400px-GoldenGateBridge-001.jpg') fixed;
    background-size:cover;
    padding: 20px;
}