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;
    visibility:hidden;
}

JavaScript

$(window).scroll(function () {
    console.log($(window).scrollTop());
    var topDivHeight = $(".topdiv").height();
    var viewPortSize = $(window).height();
    
    var triggerAt = 150;
    var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;

    if ($(window).scrollTop() >= triggerHeight) {
        $('.fadethisdiv').css('visibility', 'visible').hide().fadeIn();
        $(this).off('scroll');
    }
});