JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>

</div>
<div>

</div>
<div class="fade">

</div>
<div class="fade">

</div>
<div class="fade">

</div>
<div class="fade">

</div>

CSS

.fade {
  opacity: 1;
}

div {
  width: 100%;
  height: 350px;
  background: #333;
  margin: 10px 0;
}

JavaScript

$(document).ready(function() {
    $(window).scroll(function() {
        var winheight = $(window).innerHeight();
            $(".fade").each(function() {
                /* Check the location of each desired element */
                var objectBottom = $(this).offset().top + $(this).outerHeight();
                var windowBottom = $(window).scrollTop() + $(window).innerHeight();
								console.log(windowBottom > (objectBottom - (winheight*0.65)));
                console.log(windowBottom);
                console.log(objectBottom);
                /* If the element is completely within bounds of the window, fade it in */
                if ( windowBottom >= (objectBottom - (winheight*0.65))) { //object comes into view (scrolling down)
                    if ($(this).css("opacity")==0) {$(this).fadeTo(300,1);}
                } else { //object goes out of view (scrolling up)
                    if ($(this).css("opacity")==1) {$(this).fadeTo(300,0);}
                }
            });
        }); $(window).scroll(); //invoke scroll-handler on page-load
    });