JSFiddle - React, Tailwind, and code Playground

by Cory Dobson

HTML

<div class="fullHeightScrollAssist"></div>
<div class="fullHeightScrollAssist"></div>
<div class="fullHeightScrollAssist"></div>
<div class="fullHeightScrollAssist"></div>
<div class="fullHeightScrollAssist"></div>
<div class="fullHeightScrollAssist"></div>

CSS

.fullHeightScrollAssist {
    height:100vh;
    width:100%;
}
.fullHeightScrollAssist:nth-child(odd) {
    background:red;
}
.fullHeightScrollAssist:nth-child(even) {
    background:blue;
}

JavaScript

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var maxScroll = $(window).height();


$(window).scroll(function (event) {
    didScroll = true;
});

setInterval(function () {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 800);

function hasScrolled() {
    var st = $(document).scrollTop();
    var winTop = $(window).scrollTop();
    var winBottom = winTop + ($(window).height());

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
    return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop) {
        // Scroll Down
        $('.fullHeightScrollAssist').each(function (index, element) {
            var elTop = $(this).offset().top;
            var elBottom = elTop + $(this).outerHeight();
            if (elTop > winTop && elTop < winBottom) {
                $('.fullHeightScrollAssist').removeClass('activeFullScreen');
                $(this).addClass('activeFullScreen');
                $('html,body').animate({
                    scrollTop: elTop
                }, 700);
            };
        });
        
    } else {
        // Scroll Up
        $('.fullHeightScrollAssist').each(function (index, element) {
            var elTop = $(this).offset().top;
            var elBottom = elTop + $(this).outerHeight();
            if (elBottom > winTop && elTop < winTop) {
                $('.fullHeightScrollAssist').removeClass('activeFullScreen');
                $(this).addClass('activeFullScreen');
                $('html,body').animate({
                    scrollTop: elTop
                }, 700);
            };
        });
    }

    lastScrollTop = st;
}