첫번째랑 마지막 요가+폰하는 그림이 높이가 꼬였습니다

보여드린 스크린샷처럼 첫번째는 여백에 비해 그림이 너무 동떨어지고, 마지막 폰하는 그림이 요가 그림을 스크롤하면 바로 밑으로 나옵니다 😥

css 코드는

html {
  font-family: "Noto Sans KR", sans-serif;
}

body {
  margin: 0;
}
div,
section,
header,
footer,
p,
h1,
h2 {
  box-sizing: border-box;
}
a {
  color: royalblue;
}
img {
  max-width: 100%;
  height: auto;
}

.global-width {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 1rem;
}

.scroll-graphic {
  position: sticky;
  top: 0;
  height: 100vh;
}

.graphic-item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  transition: 0.5s;
}

.visible {
  opacity: 1;
}

.scene-img {
  max-height: 100vh;
}

.scroll-text {
  position: relative;
}

.step {
  margin-bottom: 60vh;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: 0.2px solid rgba(216, 216, 216, 0.2);
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px;
  background: rgba(255, 255, 255, 0.8);
}

이거구요

js는

(() => {

    const stepElems = document.querySelectorAll('.step');
    const graphicElems = document.querySelectorAll('.graphic-item');
    let currentItem = graphicElems[0];

    for (let i = 0; i < stepElems.length; i++) {
        // stepElems[i].setAttribute('date-index', i);
        stepElems[i].dataset.index = i;
        graphicElems[i].dataset.index = i;
    }

    function activate() {
        currentItem.classList.add('visible');
    }


    function inactivate() {
        currentItem.classList.remove('visible');
    }


    window.addEventListener('scroll', () => {
        let step;
        let boundingRect;

        for (let i = 0; i < stepElems.length; i++) {
            step = stepElems[i];
            boundingRect = step.getBoundingClientRect();

            if (boundingRect.top > window.innerHeight * 0.1 &&
                boundingRect.top < window.innerHeight * 0.8) {

                inactivate();
                currentItem = graphicElems[step.dataset.index];
                activate();
            }
        }
    });
    activate();
})();

이 코드입니다 어떤게 문제일까요..?😥

인프런 커뮤니티 질문&답변