JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<div id="scroll-animate">
    <div id="scroll-animate-main">
        <div class="wrapper-parallax">
            <div class="CMS_KK_contentBlock section" id="one">ONE
                <div class="nav-scroll"> <a class="next two" href="#two">NEXT</a>

                </div>
            </div>
            <div class="CMS_KK_contentBlock section" id="two">TWO
                <div class="nav-scroll"> <a class="next three" href="#three">NEXT</a>

                </div>
            </div>
            <div class="CMS_KK_contentBlock section" id="three">THREE
                <div class="nav-scroll"> <a class="next four" href="#four">NEXT</a>

                </div>
            </div>
            <div class="CMS_KK_contentBlock section" id="four">FOUR
                <div class="nav-scroll"> <a class="next five" href="#five">NEXT</a>

                </div>
            </div>
            <div class="CMS_KK_contentBlock section" id="five">FIVE
                <div class="nav-scroll last"> <a class="next one" href="#one"> TOP</a>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

body{
    min-height:100%;
    height:100;
}
  *,
  :before,
  :after {
    box-sizing: border-box;
  }

.section{
    min-height:100%;
    height:100;
}
.CMS_KK_contentBlock {
      position:relative;
      background: rgba(0, 0, 0, 85);
      color:#fff;
      display: inline-block;
      min-height: 100%;
      height: 100%;
  }
  .CMS_KK_contentBlock:nth-child(even) {
      background: rgba(255, 255, 255, 0.9);
      color:#000;
  }
  @media all and (min-width: 768px) {
      .CMS_KK_contentBlock:nth-child(even):after {
          content:"";
          position:absolute;
          height:100%;
          min-height:100%;
          top:0;
          right:-100%;
          width: 100%;
          background: rgba(0, 0, 0, 0.3);
      }
      .CMS_KK_contentBlock:nth-child(even):before {
          content:"";
          position:absolute;
          height:100%;
          min-height:100%;
          top:0;
          left: -100%;
          width: 100%;
          background: rgba(253, 207, 214, 0.5);
      }
  }
  .CMS_KK_contentBlock.section {
      max-width: 1366px;
      padding: 142px 4.3923865300146414% 142px 4.3923865300146414%;
      margin: auto;
      display: block;
  }
  #scroll-animate {
      overflow: hidden;
  }
  #scroll-animate-main {
      width: 100%;
      left: 0;
      position: fixed;
  }
  .wrapper-parallax {
      max-width: 100%;
  }
  /*ONE*/
  .mobile .CMS_KK_contentBlock.section#one {
      position: fixed;
      top:0px;
      z-index: 0;
      height: 100%;
      max-width: 1366px;
      overflow: hidden;
      opacity: 1;
  }
  .mobile .overlay {
      max-width: 1366px;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 1);
      z-index: 6;
      opacity: 0;
  }
  .CMS_KK_contentBlock.section .nav-scroll {
      bottom: 0px;
      left: 0;
      overflow: hidden;
      position: absolute;
      z-index: 5;
      width: 100%;
      transition: all 0.3s ease-out;
     ...

JavaScript

var lines = function () {
    $('div.section').css('height', $(window).height() + 'px');
}
lines();

$(window).resize(function () {
    lines();
    heightsCalculator();
});



heightsCalculator();

function heightsCalculator() {

    var windowHeight = ($(window).height()),
        heightDocument = (windowHeight) + ($('#one').height()) + ($('#two').height()) + ($('#three').height()) + ($('#four').height()) + ($('#five').height()) - 0;

    $('#scroll-animate, #scroll-animate-main').css({
        'height': heightDocument + 'px'
    });

    window.onscroll = function () {
        var scroll = window.scrollY;

        $('#scroll-animate-main').css({
            'top': '-' + scroll + 'px'
        });

        $('#one').css({
            'background-position-y': 50 - (scroll * 100 / heightDocument) + '%'
        });

    }
}



$(window).load(function () {
    redrawDotNav();
});

$(window).bind('scroll', function (e) {
    redrawDotNav();
    parallaxScroll();
});

$('a.one').click(function () {
    $('html, body').animate({
        scrollTop: 0
    }, 1000, function () {
        parallaxScroll();
    });
    return false;
});

$('a.two').click(function () {
    $('html, body').animate({
        scrollTop: $('#two').offset().top
    }, 1000, function () {
        parallaxScroll();
    });
    return false;
});

$('a.three').click(function () {
    $('html, body').animate({
        scrollTop: $('#three').offset().top
    }, 1000, function () {
        parallaxScroll();
    });
    return false;
});


$('a.four').click(function () {
    $('html, body').animate({
        scrollTop: $('#four').offset().top
    }, 1000, function () {
        parallaxScroll();
    });
    return false;
});

$('a.five').click(function () {
    $('html, body').animate({
        scrollTop: $('#five').offset().top
    }, 1000, function () {
        parallaxScroll();
    });
    return false;
});

function parallaxScroll() {
    var scrolled = $(window).scrollTop();
    $('#one').css('top',...