JSFiddle - React, Tailwind, and code Playground

by sm1215

HTML

<section id="about1" style="background-color:red">
<div class="wrap">
About 1
</div>
</section>                            
<section id="about2" style="background-color:purple">
<div class="wrap">
About 2
</div>
</section>                            
<section id="about3" style="background-color:#0f0">
<div class="wrap">
About 3
</div>
</section>                            
<section id="about4" style="background-color:green">
<div class="wrap">
About 4
</div>
</section>

CSS

section{
  width: 100%;
}

JavaScript

$height = $(window).innerHeight();
$('section').css('height', $height);
        
function scrollDown(){
        $height = window.innerHeight;
        $scroll = $(window).scrollTop();
        console.log($scroll+' and '+$height);
        if ( $scroll > 0 && $scroll < $height) {
            $('html, body').animate({scrollTop: $("#about2").offset().top}, 1000);    
        } else if ($scroll > $height && $scroll < 2*$height) {
            $('html, body').animate({scrollTop: $("#about3").offset().top}, 1000);    
        } else if ($scroll > 2*$height && $scroll < 3*$height) {
            $('html, body').animate({scrollTop: $("#about4").offset().top}, 1000);    
        }
    }
    
    
$(window).on('scroll', function() {
    var $y_scroll_pos = window.pageYOffset;
    var $scroll_pos_test = 0;             // set to whatever you want it to be

    if($y_scroll_pos > $scroll_pos_test) {
        scrollDown();
    } 
});