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 class="testheight">
      just for testing, <br>delete this div when finished
    </div>
  </div>
</div>

CSS

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

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


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

.testheight {
  height: 555px;
  width: 555px;
}

#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%;
  height: 100%;
}

.phase1_rgt {
  float: right;
  position: relative;
  height: 200px;
}

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

.as.active {
  opacity: 1;
}

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

JavaScript

$(function() {
  //caches a jQuery object containing the header element
  var img = $(".img-fluida");
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var height = $(".tab_content").height();
    if (scroll >= height - 526) {
      img.css("top", height - "526");
      img.css("position", "absolute");
    } else {
      img.css("position", "fixed");
      img.css("top", "");
    }
  });
});