JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
</div>

CSS

#wrapper {
    height: 10000px;
    width: 100%;
    background-color: rgb(100, 100, 100);
}
#header {
    height: 300px;
    width: 100%;
    background-color: rgb(255, 0, 0);
}

JavaScript

var lastScrollTop = 0;
var firstScrollDown = true;
var scrollUp = false;
$(window).scroll(function (event) {
    var st = $(this).scrollTop();
    if (st > $('#content').offset().top) {
        scrollUp = true;
    }
    if (st > lastScrollTop) {
        if ($(window).scrollTop() !== 0 && firstScrollDown) {
            firstScrollDown = false;
            $('html, body').animate({
                scrollTop: $('#content').offset().top
            }, 'slow');
        }
    } else {
        if ($(window).scrollTop() < $('#content').offset().top && scrollUp) {
            $('html, body').animate({
                scrollTop: $('#header').offset().top
            }, 'slow');
            scrollUp = false;
        }
    }

    lastScrollTop = st;
});