JSFiddle - React, Tailwind, and code Playground

by CroaToa

HTML

<div class="container">
    <div class="first-block">
      <div class="first-block__text">
        Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Explicabo voluptates!
      </div>
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos molestias vel
        ipsum optio magnam ut aperiam reiciendis eveniet exercitationem eaque earum laboriosam nulla hic quas tempore pariatur vitae numquam molestiae ducimus ratione totam consequatur dolorum obcaecati expedita et. Non harum totam optio amet asperiores beatae atque enim provident architecto ea qui hic ipsam eos sequi quibusdam alias animi sint accusamus! Iste commodi cupiditate vel vitae officia voluptates dignissimos adipisci repudiandae architecto dolore sapiente sunt autem culpa quasi ipsam laborum corrupti rem iusto id asperiores ullam! Suscipit repellat iure deleniti quasi voluptate facere architecto quidem excepturi pariatur sit quas eaque possimus maiores nisi tempora quibusdam vitae optio provident ea fugit distinctio commodi asperiores saepe culpa porro! Aliquid ratione eligendi minus eaque fugiat ex quisquam sapiente incidunt excepturi saepe earum atque odit temporibus nulla quos ad architecto rem placeat unde eius. At beatae maxime nostrum quis a. Quisquam recusandae officiis eos eaque nihil expedita ut officia minus soluta odit necessitatibus maiores harum labore ullam odio. Distinctio corrupti dolores veritatis earum aperiam deserunt ratione doloribus amet saepe ex sed optio ad tempora ullam voluptates debitis voluptatibus! Distinctio autem deleniti enim aliquam aliquid qui sed deserunt architecto molestiae fugiat dignissimos dolore veniam repellat ex culpa velit cum quisquam ullam beatae unde sint doloremque nisi est iusto placeat. Sit sapiente repellat quidem sunt enim numquam voluptatibus molestiae ea culpa fuga laboriosam veniam impedit sequi quis doloribus molestias ducimus laborum perspiciatis perferendis distinctio...

CSS

.container {
  height: 3000px
}

.first-block {
  height: 100%;
  background: green;
  color: #fff;
  text-align: center;
}

JavaScript

$(document).ready(function(){
  var winHeight = (window.pageXOffset != undefined) ?

                function() {
                    return window.innerHeight;
                } :
                function() {
                    return document.documentElement.clientHeight;
                };
  $('.first-block').height(winHeight);
  $(window).scroll(function(){
    
    var firstBlockHeight = winHeight();
    var scrollTop= $('body').scrollTop();
    
    if (scrollTop > 0 && scrollTop < firstBlockHeight/2 && $('body').hasClass('scrolled') === false) {
      $("body")
          .animate({ scrollTop: firstBlockHeight+10 }, 600)
          .addClass('scrolled');
      
    } else if (scrollTop==0) {
      $("body")
        .animate({ scrollTop: 0 }, 600)
        .removeClass('scrolled');
    }
  });
});