show different images based on current scroll position

Issue

I have a wrapper with two sides. The left side with class mainCon is where the main content will go. I have left it empty for now. On the right side, class fixedCon contains 3 images. What I aim to do is when scrolling on DOM those three images will show once at a time. The current scroll position will determine which image to show. I added a sample code of what I want to achieve below but I am sure this can be achieved with a simpler method. My main issue with my current code is that when the images change, it feels like they don't change smoothly. I have added a gif below to better show what I want to achieve. Any help is appreciated. Thanks

const scrollHeight = document.documentElement.scrollHeight

const a = scrollHeight / 3
const b = scrollHeight / 3 * 2
const c = scrollHeight / 3 * 3

const I1 = document.querySelector('#I1')
const I2 = document.querySelector('#I2')
const I3 = document.querySelector('#I3')

window.addEventListener("scroll", (event) => {
  I1.style.display = 'none'
  I2.style.display = 'none'
  I3.style.display = 'none'
  let currentScroll = this.scrollY;
  if (currentScroll < a) {
    I1.style.display = 'flex'
    I1.style.position = 'fixed'
  } else if (currentScroll < b && currentScroll > a) {
    I2.style.display = 'flex'
    I2.style.position = 'fixed'
  } else if (currentScroll < c && currentScroll > b) {
    I3.style.display = 'flex'
    I3.style.position = 'fixed'
  }
});

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 700vh;
  background-color: salmon;
}

.wrapper .mainCon {
  width: 70%;
  height: 100%;
  background-color: blue;
}

.wrapper .fixedCon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  height: 100%;
  background-color: gold;
}

.wrapper .fixedCon img {
  display: none;
  width: 210px;
  height: 400px;
}

#I1 {
  display: flex;
}

<div class="wrapper">
  <div class="mainCon">
  </div>
  <div class="fixedCon">
    <img id="I1" src="https://c8.alamy.com/comp/2JBC70X/realistic-mayonnaise-vertical-ads-poster-with-outdoor-scenery-table-and-eggs-with-plates-and-product-package-vector-illustration-2JBC70X.jpg" />
    <img id="I2" src="https://img.pikbest.com/origin/06/48/91/82qpIkbEsTUQe.jpg!w700wp" />
    <img id="I3" src="https://www.shutterstock.com/shutterstock/photos/531750643/display_1500/stock-vector-christmas-sale-vertical-advertising-banner-531750643.jpg" />
  </div>
</div>

Solution

You can use position: sticky

.wrapper {
  display: grid;
  grid-template: 1fr / 8fr 2fr;
  height: 700vh;
  background-color: salmon;
}

.mainCon {
  background-color: blue;
}

.fixedCon img {
  width: 100%;
  height: auto;
  position: sticky;
  top: 0;
}

.fixedCon {
  display: grid;
  grid-auto-rows: 1fr;
}

<div class="wrapper">
  <div class="mainCon">
  </div>
  <div class="fixedCon">
    <div class="ad">
      <img src="https://c8.alamy.com/comp/2JBC70X/realistic-mayonnaise-vertical-ads-poster-with-outdoor-scenery-table-and-eggs-with-plates-and-product-package-vector-illustration-2JBC70X.jpg" />
    </div>
    <div class="ad">
      <img src="https://img.pikbest.com/origin/06/48/91/82qpIkbEsTUQe.jpg!w700wp" />
    </div>
    <div class="ad">
      <img src="https://www.shutterstock.com/shutterstock/photos/531750643/display_1500/stock-vector-christmas-sale-vertical-advertising-banner-531750643.jpg" />
    </div>



  </div>
</div>

Answered By - Dan