JSFiddle - React, Tailwind, and code Playground

by Prashant Shirke

HTML

<div class="test" style="height:100px;width:70px;">
    sadfsadf
    
    saf
    sadf
    saf
    s
    af
    saf
    saf
    sadf
    sadfsafsafsaf
    sadfsaf
    
    sadfsafsadf
    
    sadfsaf
    sa
    dfsa
    fsadf
</div>


<div class="test" style="height:100px;width:70px;">
    sadfsadf
    
    saf
    sadf
    saf
    s
    af
    saf
    saf
    sadf
    sadfsafsafsaf
    sadfsaf
    
    sadfsafsadf
    
    sadfsaf
    sa
    dfsa
    fsadf
</div>

CSS

.test {margin-top: 500px;
margin-bottom: 1000px;
background-color: red;}

JavaScript

$(document).ready(function() {
    $('.test').attr("attop", false);
    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        var windowScrollTop = $(this).scrollTop();
        if (windowScrollTop > lastScrollTop) {
            var currentDiv = $('.test[attop="false"]:first');
            if (currentDiv && currentDiv.length > 0) {
                if (windowScrollTop >= currentDiv.offset().top) {
                    currentDiv.attr('attop', true);
                    alert('reached top');
                }
            }

        } else {
            var currentTopDivs = $('.test[attop="true"]');
            if (currentTopDivs && currentTopDivs.length > 0) {
                $.each(currentTopDivs,function(i,elem){
					if (windowScrollTop <= $(elem).offset().top) {
						$(elem).attr('attop', false);
					}					
				});
            }
        }
        lastScrollTop = windowScrollTop;

    });

});