JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">
    <h3>Div 1</h3>
    <a href="#div2">Next</a>
</div>
<div id="div2">
    <h3>Div 2</h3>
    <a href="#div3">Next</a>
    <a href="#div1">Prev</a>
</div>
<div id="div3">
    <h3>Div 3</h3>
    <a href="#div4">Next</a>
    <a href="#div2">Prev</a>
</div>
<div id="div4">
    <h3>Div 4</h3>
    <a href="#div5">Next</a>
    <a href="#div3">Prev</a>
</div>
<div id="div5">
    <h3>Div 5</h3>
    <a href="#div4">Prev</a>
</div>
<div id="message" style="position:fixed;top:0;">
Current scroll position: 0
</div>

CSS

body{
    overflow:hidden;
}
div{
    background:red;
}
h3{
    color:#fff;
}
a{
    color:yellow;
    display:inline-block;
    margin-top:320px;
    margin-right:10px;
}
#div3 a
{
    margin-top:500px;
}
}

JavaScript

$(window).scroll(function() {
    $('#message').text("Current scroll position: " + $(this).scrollTop());
     var pixels_to_top = $(this).scrollTop();
        var your_value_min = 810;
            var your_value_max = 857;
        if (pixels_to_top > your_value_min && pixels_to_top<your_value_max){
             $("body").css("overflow","auto");
           }
    else{
     $("body").css("overflow","hidden");
    }
});