JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="container">
    <div id="s1" class="section">
        <div class="section-content">section 1:<br/>height = 400px<br/><br/><small>just to show functionality of sections with variable sizes</small></div>
        <div class="bg-img natur1"></div>
    </div>
    <div id="s2" class="section">
        <div class="section-content">section 2:<br/>height = 600px<br/><br/><small>just to show functionality of sections with variable sizes</small></div>
        <div class="bg-img natur2"></div>
    </div>
    <div id="s3" class="section">
        <div class="section-content">section 3:<br/>height = 200px<br/><br/><small>just to show functionality of sections with variable sizes</small></div>
        <div class="bg-img natur3"></div>
    </div>
</div>

CSS

html, body { margin:0; padding:0; height:100%; }

.container { height:800px; position:relative; padding-top: 50px; }

.section { padding-bottom: 300px; /*min-height:100vh;*/ box-sizing:border-box; }
.section-content {
    width:100%; height:400px; /*min-height:50vh*/
    background-color:purple; color:white; z-index:10;
}
#s1 .section-content { height: 400px; }
#s2 .section-content { height: 600px; }
#s3 .section-content { height: 200px; }

.bg-img {
    position:fixed;top:0;z-index:-100;
    width:100%;height:100%;
    background:transparent url('') top repeat fixed;
    background-size:cover;
    opacity: 0;

    -webkit-transition: opacity .5s linear;
    -moz-transition: opacity .5s linear;
    -ms-transition: opacity .5s linear;
    -o-transition: opacity .5s linear;
    transition: opacity .5s linear;
}
.bg-img.natur1 { background-image:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg'); }
.bg-img.natur2 { background-image:url('http://i.istockimg.com/file_thumbview_approve/70676665/6/stock-photo-70676665-sunset-in-autumn.jpg'); }
.bg-img.natur3 { background-image:url('http://i.istockimg.com/file_thumbview_approve/75653143/6/stock-photo-75653143-morning-meadow-with-dew.jpg'); }

.section.active .bg-img { opacity:1; }

JavaScript

$(window).on('scroll', function() {

    var scrolledTop = $(window).scrollTop(),
    		windowHeight = $(window).height();

    $('.section').each( function() {
        var $section = $(this),
        		elemTop = $section.offset().top,
        	  sectionHeight = $section.outerHeight();

        if(elemTop-scrolledTop < windowHeight/2 && elemTop-scrolledTop > -sectionHeight) {
            $section.addClass('active');
        } else {
            $section.removeClass('active');
        }
    })
});

$(window).trigger('scroll');