JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div class="container">

    <div>This is a 100% height div. User scrolls down from here.</div>
    <div>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>This is a 100% height div. User scrolls down from here.</div>
    <div>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>This is a 100% height div. User scrolls down from here.</div>
    <div>The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
    The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
    The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
    The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it...

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');
    }
});