JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<ul id="slider">
		<li class="active"></li>
		<li></li>
		<li></li>
	</ul>
	<div class="block"></div>

CSS

* {
    margin:0;
    padding:0;
    outline: none;
    box-sizing: border-box;
}
html, body {
    font-size: 1px;
    font-family: 'Open Sans', sans-serif;
    margin:0;
    padding:0;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    height: 100%;
    min-width: 1090px;
	background: #000;
}
#slider {
	width: 100%;
	height: 657px;
	position: relative;
	margin: 50px auto;
}
li {
	list-style: none;
	width: 100%;
	height: 657px;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
li.active {
	display: block;
}
li:nth-child(1) {background: blue;}
li:nth-child(2) {background: green;}
li:nth-child(3) {background: purpure;}
.block {
	width: 100%;
	height: 500px;
	background: tomato;
}

JavaScript

function addMarkers(trigger) {
  var vh = $(window).height();
  $('body').append('<div class="marker--start">start-----</div>')
  $('body').append('<div class="marker--trigger">-----trigger</div>')
  $('body').append('<div class="marker--trigger2">-----trigger2</div>')
  $('.marker--start').css({
      position: 'absolute',
      top: trigger + (5 * vh),
      right: 100,
      color: 'white',
      'font-size': '30px',
      'z-index': 1000,
  })
 $('.marker--trigger2').css({
      position: 'fixed',
      top: 0.5 * vh,
      right: 0,
      color: 'white',
      'font-size': '30px',
      'z-index': 1000,
  })
  $('.marker--trigger').css({
      position: 'fixed',
      top: 0.1 * vh,
      right: 0,
      color: 'white',
      'font-size': '30px',
      'z-index': 1000,
  })
}

var trigger = 4000;
var trigger2 = 4500;
addMarkers(trigger);
$(window).on('scroll', function(){
  var scrollTop = $(window).scrollTop();
  console.log(scrollTop)
  if (scrollTop >= trigger) {
    $('li').removeClass('active')
    $('li:nth-child(3)').addClass('active');
  }else if (scrollTop >= trigger2) {
    $('li').removeClass('active')
    $('li:nth-child(2)').addClass('active');
  }else {
    $('li').removeClass('active')
    $('li:nth-child(1)').addClass('active');
  }
})