How to make image sticky over many divisions to a desired length using CSS or JS?

Question

Is there any way i can make image sticky across a number of divisions using JS ?

Here the bottle image should stop at the green division and shouldn't cross the green division.

I am not able to make the image sticky with CSS.

I already refered to

1. https://www.digitalocean.com/community/tutorials/css-position-sticky
2. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_sticky

Refered answers on stack

1. POSITION STICKY CSS
2. CSS position sticky
3. How to make a scrolling image that becomes sticky

.bottle-div {
  width: 50%;
  position: relative;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.bottle-img {
  align-items: flex-start;
  position: -webkit-sticky;
  position: sticky;
  bottom: 2000px;
  align-self: flex-end;
  height: 450px;
  top: 0;
}

<div style="width:100%;height:1000px;">
  <div class="bottle-div">
    <img class="bottle-img" src="https://lh3.googleusercontent.com/proxy/-klk4jcpVNSQo3S37pLOBk3k-4JXAyQCfXIsYj9QYe1DFahxWsY6Ua9H_4G5i1qGTTDJjL5Vgsas4R3bwNQq7eOBf-8Z93LsKbXfj8mZZFbyo6cINWisRuE6sEfK5gbtDy5I4p7QRPoIPsWLqgfI0Zea2AldJte5wdsrcKSp_eDRWEkPKV98NKnv">
  </div>
</div>
<div style="width:500px; height:500px; background-color:red;">
</div>
<div style="width:500px; height:500px; background-color:green;">
</div>
<div style="width:500px; height:500px; background-color:blue;">
</div>

THANKYOU.