JSFiddle - React, Tailwind, and code Playground

by DinoMyte

HTML

<div class="current_div">Section Name</div>
<div class="red" data-section="Section Red"></div>
<div class="blue" data-section="Section Blue"></div>
<div class="yellow" data-section="Section Yellow"></div>
<div class="green" data-section="Section Green"></div>

CSS

.current_div{
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}
.colors{
  position:relative;
}
.red{
  background-color:red;
  height:300px;
}
.blue{
  background-color:blue;
  height:300px;
}
.yellow{
  background-color:yellow;
  height:300px;
}
.green{
  background-color:green;
  height:300px;
}

JavaScript

$( window ).scroll(function() {
  var $div = $(".current_div").offset().top;
  if($div >= $(".red").offset().top)
    $(".current_div").text("Section Red");
  if($div >= $(".blue").offset().top)
    $(".current_div").text("Section Blue");
  if($div >= $(".yellow").offset().top)
    $(".current_div").text("Section Yellow");
  if($div >= $(".green").offset().top)
    $(".current_div").text("Section Green");
});