[Javascript] 특정 위치에서 div 속성 바꾸기

이렇게 특정 위치에 도달하면 div의 속성을 바꾸고 특정 위치를 벗어나면 속성을 원래대로 돌리는 애니메이션을 만들었다.

 

HTML

<div class="section">

  <div class="left">

    <p>여기는 고정!</p>

  </div>

  <div class="right">

    <div class="right-left">

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

    </div>

    <div class="right-right">

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

      <div class="box"></div>

    </div>

  </div>

</div>

왼쪽은 고정, 오른쪽에 여러개의 box를 만들어두었다.

 

CSS

.section{

  width: 100%;

  height: 500vh;

  margin-top: 500px;

  display: flex;

}

.left{

  position: sticky;

  top: 0;

  width: 50%;

  height: 100vh;

}

.left p{

  text-align: center;

  font-size: 60px;

  margin-top: 300px;

}

.right{

  width: 50%;

  display: flex;

}

.right-left,

.right-right{

  width: 50%;

}

.right-left .box,

.right-right .box{

  width: 300px;

  height: 300px;

  border: 5px solid black;

  margin-top: 100px;

  transition: all 0.3s;

}

.right-right .box:first-child{

  margin-top: 200px;

}

.active{

  background: black;

}

active라는 클래스를 미리 만들어 놓고 자바스크립트로 클래스를 넣고 뺄 예정이다.

 

Javascript

window.addEventListener('scroll', function () {

  for (let i = 0; i < document.querySelectorAll('.box').length; i++) {

    if (document.querySelectorAll('.box')[i].getBoundingClientRect().top <= 500 && document.querySelectorAll('.box')[i].getBoundingClientRect().top >= 200) {

      document.querySelectorAll('.box')[i].classList.add('active');

    } else {

      document.querySelectorAll('.box')[i].classList.remove('active');

    }

  }

})

스크롤 이벤트리스너를 사용해서 for 반복문을 사용해주었다. getBoundingClientRect().top는 div의 꼭대기 위치의 화면상의 scroll 값을 구해준다. 그래서 200 ~ 500사이에 위치할 때 active클래스를 추가해주고 벗어나면 클래스를 제거하는 코드를 짰다.

 

이번 코드를 짜면서 getboundingClientRect().top이라는 코드를 알게 되어서 이 또한 유용하게 많이 쓰일 수 있을 거라고 생각한다.