JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper">
      <aside id="side-nav">
          <ul>
              <li id="link-1">Link One</li>
              <li id="link-2">Link Two</li>
              <li id="link-3">Link Three</li>
          </ul>
      </aside>

      <div id="sections">
        <section id="one" class="section">
          <p>Section One Content</p>
        </section>
        <section id="two" class="section">
          <p>Section Two Content</p>
        </section>
        <section id="three" class="section">
          <p>Section Three Content</p>
        </section>
      </div> <!-- end of #sections -->

    </div> <!-- end of #wrapper -->
</body>

CSS

* {margin:0;font-family:Helvetica;}
#wrapper         {width: 960px;}
#side-nav        {float: left; height: 500px; width: 200px; background: #999;}
#side-nav.fixed  {position: fixed; top: 0;}
li {list-style:none;float:left;padding:10px;}
section {height: 500px;}
#sections        {float: right; width: 700px;padding:10px;}
#sections #one   {color: #777;}
#sections #two   {color: #555;}
#sections #three {color: #333;}

JavaScript

var top = $('#side-nav').offset().top - parseFloat($('#side-nav').css('margin-top').replace(/auto/, 0));
     $(window).scroll(function (event){
       var t = $(this).scrollTop();
       if (t >= top) {
        $('#side-nav').addClass('fixed');
       } else {
         $('#side-nav').removeClass('fixed');
       }
         
         var Position = $('#side-nav').offset().top - t,
             onePosition = $("#one").offset().top - t,
             twoPosition = $("#two").offset().top - t,
             threePosition = $("#three").offset().top - t;

         if(Position  > threePosition){
            
             $('#link-3').css({'color' : 'grey'});
         }else if(Position > twoPosition){
            
              $('#link-2').css({'color' : 'purple'});
         }else if(Position  > onePosition){
             
              $('#side-nav li').css({'color' : 'yellow'});
         }
     });