How to set image as fix position & move the content to its right scrollable using Jquery?

Question

Here, i am trying to set image as fix position & move the content to its right scrollable using Jquery , as of now its not working well. Is their any way to make it work ?

Answer 1

As you commented, jQuery is not mandatory, so here is the CSS solution, no need of jQuery

position: sticky is your friend here.

check the updated codePen here.

or check the snippet below.

.phase1_main {width: 100%;display: inline-block;position:relative;}
img {width: auto;max-width: 100%;height: auto;}
#sticky {padding: 0.5ex;}
#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;}
.phase1_lgt {position: sticky; top:0;}

<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>

Answer 2

Use position: fixed; on your img in the css

https://jsfiddle.net/9ovxs2Lm/

You could use position: sticky as well, but if you only want the photo to be in one place, you should use position: fixed, as "sticky" is intended to toggle between relative and fixed. And fixed, stays fixed. Judging by your question, this is what you want.

Read answers here: Difference between position:sticky and position:fixed?

EDIT: OP wanted it to change value position after reaching the bottom of the text on the right.

Check this fiddle: https://jsfiddle.net/4va5doc0/1/

I've used jQuery to set the height of the div which contains all your text, and used it to change the position-value to absolute after you scroll an amount equal to the text-content height. It will then place the image on the exact place where the height of your text-content, and I subtracted the height of the image so it aligns with the bottom part of the image, and not the top. I added another div in the bottom of your HTML so you could test this. I believe this answers your question?

Here is the jQuery added:

$(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", "");
    }
  });
});