JSFiddle - React, Tailwind, and code Playground

by Mi_Creativity

HTML

<div id="links">
		Sections 
		<a id="lnk0" href="#one" class="highlight">1</a>
		<a id="lnk1" href="#two">2</a>
		<a id="lnk2" href="#three">3</a>
		<a id="lnk3" href="#four">4</a>
		<a id="lnk4" href="#five">5</a>
	</div>
	<div id="one" class="sections">Section ONE</div>
	<div id="two" class="sections">Section TWO</div>
	<div id="three" class="sections">Section THREE</div>
	<div id="four" class="sections">Section FOUR</div>
	<div id="five" class="sections">Section Five</div>

CSS

body{
  margin:0;
  padding:0;
  height:1500px;
  overflow:hidden;
}
#links{
  width:65px;
  height:30px;
  line-height:30px;
  background-color:rgba(0,0,0, 0.7);
  margin-top:5px;
  margin-left:-10px;
  border-top-right-radius:15px;
  border-bottom-right-radius:15px;
  color:white;
  padding-left:20px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.6);
  position:fixed;
  z-index:1000;
  overflow:hidden;
  transition:all 0.5s ease-in-out;
  cursor:default;
}
#links:hover{
  width:195px;
  transition:all 0.5s ease-in-out;
}
#links a{
  width:22px;
  line-height:22px;
  display:inline-block;
  border-radius:50%;
  text-decoration:none;
  color:#444;
  background-color:rgba(255,255,255, 0.7);
  text-align:center;
  font-weight:bold;
  transition:all 0.3s ease-in-out;
}
#links a:hover, #links .highlight{
  background-color:black;
  color:#EEE;
}
.sections{
  width:100%;
  height:100vh;
  color:white;
  text-align:center;
  font-size:72px;
  line-height:100vh;
  text-shadow:0 0 5px rgba(0,0,0,0.7);
}
#one{background-color:green}
#two{background-color:orange}
#three{background-color:tomato}
#four{background-color:skyblue}
#five{background-color:navy}

JavaScript

var secret = [false, false, false, false, false],
    sections = $('.sections'),
    body = $('html, body'),
    links = $('#links a'),
    prevLinkId = 0,
    linkId, secHeight, scrlTop, diff;

    
links.each(function(index){
  $(this).on('click', function(e){
    e.preventDefault();
    secHeight = $('#one').height();
    linkId = $(this).attr('id');
    linkId = linkId.replace('lnk', '');
    links.removeClass('highlight');
    $(links[linkId]).addClass('highlight');
    diff = Math.abs(linkId - prevLinkId);
    timeDelay = diff * 250;
    distance = index * secHeight;
    body.animate({scrollTop: distance} , timeDelay);
    prevLinkId = linkId;
  });
});
    
$(window).on('scroll', function(){
  scrlTop = $(this).scrollTop();
  playOnce();
});

$(window).on('DOMMouseScroll mousewheel', function(e){
  scrlTop = $(this).scrollTop();
  if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
    //scroll down
    body.animate({scrollTop: scrlTop + 50} , 20);
  }else {
    //scroll up
    body.animate({scrollTop: scrlTop - 50} , 20);
  }
  playOnce();
});

function playOnce(){
  secHeight = $('#one').height()
  if(scrlTop >= 0 && scrlTop < secHeight){
    if(secret[0] == false){
      console.log('this is Section One');
      secret = [true, false, false, false, false];
    }
  }else if(scrlTop >= secHeight && scrlTop < 2 * secHeight){
    if(secret[1] == false){
      console.log('this is Section Two');
      secret = [false, true, false, false, false];
    }
  }
  else if(scrlTop >= 2 * secHeight && scrlTop < 3 * secHeight){
    if(secret[2] == false){
      console.log('this is Section Three');
      secret = [false, false, true, false, false];
    }
  }
  else if(scrlTop >= 3 * secHeight && scrlTop < 4 * secHeight){
    if(secret[3] == false){
      console.log('this is Section Four');
      secret = [false, false, false, true, false];
    }
  }else if(scrlTop >= 4 * secHeight && scrlTop < 5 * secHeight){
    if(secret[4] == false){
     ...