JSFiddle - React, Tailwind, and code Playground

HTML

<div class="phase1_main">
  <div class="phase1_lgt">
    <div id="sticky-anchor"></div>
    <div id="sticky">
      <img class="img-fluida" src="https://cdn.shopify.com/s/files/1/0054/3978/3001/files/lady_hair1_600x.jpg">
    </div>
  </div>
  <div class="phase1_rgt">
    <h2>Healthy hair begins at the scalp</h2>
    <p>We believe wellness takes time, and it applies to your scalp and hair.</p>
    <div class="phase1_inner">
      <div class="progress-container">
        <div class="progress-bar" id="myBar"></div>
      </div>
    </div>
    <div class="tab_content">
      <div class="as">
        <small>Phase 1</small>
        <span>Removal</span>
        <p>+ Sebum and build up removal</p>
        <p>+ Itchiness starts to lessen</p>
      </div>
      <div class="as">
        <small>Phase 2</small>
        <span>Nourishment</span>
        <p>+ Scalp inflammation reduced</p>
        <p>+ Deeper absorption of nutrients</p>
        <p>+ Hair adjusts to absence of silicones, some flatness may occur</p>
      </div>
      <div class="as">
        <small>Phase 3</small>
        <span>Adaption</span>
        <p>+ Hair adjusts to essential oils and natural ingredients</p>
        <p>+ Hair gains additional shine from natural sources, no longer silicones</p>
        <p>+ Scalp inflammation and flakiness has significantly reduced</p>
      </div>
    </div>
  </div>
</div>

CSS

.phase1_main {
  width: 100%;
  display: inline-block;
}

img {
  width: auto;
  max-width: 100%;
  height: auto;
  position: fixed;
}

#sticky {
  padding: 0.5ex;
  width: 600px;
}

#sticky.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
}

.phase1_inner {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 8px;
  height: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  height: 100%;
  width: 8px;
  background: #ccc;
}

.progress-bar {
  width: 8px;
  background: #4caf50;
  height: 0%;
}

.content {
  padding: 100px 0;
  margin: 50px auto 0 auto;
  width: 80%;
}

.phase1_lgt,
.phase1_rgt {
  float: left;
  width: 50%;
}

.phase1_rgt {
  float: right;
  position: relative;
}

.img42 {
  width: 100%;
  display: inline-block;
}

.as.active {
  opacity: 1;
}

.as {
  font-size: 50px;
  line-height: normal;
  padding: 50px;
  opacity: 0.2;
}

JavaScript

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $("#sticky-anchor").offset().top;
  if (window_top > div_top) {
    $("#sticky").addClass("stick");
  } else {
    $("#sticky").removeClass("stick");
  }
}
$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
  myFunction();
};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.height = scrolled + "%";
}
$(window).scroll(function() {
  $(".as").each(function() {
    if (
      $(window).scrollTop() >= $(this).offset().top + $(this).height() ||
      $(window).scrollTop() < $(this).offset().top
    )
      $(this).removeClass("active");
    else $(this).addClass("active");
  });
});