JSFiddle - React, Tailwind, and code Playground

by abdelhady

HTML

<div class="container">
    <div class="topdiv">
        This is a 100% height div. User scrolls down from here.
    </div>
    <div class="fadethisdiv" id="divv">
        This div should start fading out once it became [allowedHeightFromBottom]px from the bottom of the viewport, & will disappear completely based on the chosen "speed".
    </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

jQuery.fn.hideWhileScrollingUp = function (options) {
    var element = this;
    var defaults = {
        speed: 3,
        allowedHeightFromBottom: 200
    };
    options = $.extend({}, defaults, options);
    $(window).scroll(function () {
        var elementHeightFromBottom = $(window).scrollTop() + $(window).height() - element.offset().top;
        var delta = elementHeightFromBottom - options.allowedHeightFromBottom;
        var opacity = 1 - (delta / $(window).height() * options.speed);
        element.css("opacity", opacity);
    });
}

$('.fadethisdiv').hideWhileScrollingUp({
    speed: 2
});