JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

<div class="topdiv">This is a 100% height div. User scrolls down from here.</div>

<div class="fadethisdiv">This content should be faded in 
once .fadethisdiv is [so many]px into the bottom of the viewport.
Let's use 150px as an example.</div>
    
</div>

CSS

.container {
    width:100%;
    height:600px;
}

.topdiv {
       position:relative;
       height:100%;
       background-color:#09f;
       text-align:center;
       font-size:24px;
}

.fadethisdiv {
       height:100%;
       background-color:#36afff;
       text-align:center;
       font-size:24px;
}

JavaScript

$(document).ready(function(){
    var view = {};
    
    var checkPosition = function(){
       var elem = $('.fadethisdiv'), top = elem.offset().top;
        
					if (top - view.limit < 300) {
						elem.css('display','none');	
                    }
				};
    
   $(window).unbind('scroll').bind('scroll', function() {
      
				view.top = $(window).scrollTop();
				view.limit = view.top + $(window).height();

				checkPosition();
			}); 
    
});