[jQuery] 특정 위치(화면 위치)에서 스크롤 이벤트

스크롤 시 화면이 특정 위치에 도달했을 때 이벤트 발생
화면의 1/2 지점과 2/3 지점에 div가 도달했을 때 배경색 변경 예시

[html]

<div>아래로 스크롤</div>

<div class="scroll-12">화면의 1/2 지점에서 이벤트 발생</div>

<div class="scroll-23">화면의 2/3 지점에서 이벤트 발생</div>

 

[css]

div {

  width: 100%; height: 700px;

  font-size: 2rem;

  text-align: center;

}

.scroll-12 {

  background: pink;

}

.scroll-23 {

  background: skyblue;

}

 

[js]

// 화면의 1/2값과 2/3값 변수 할당

let scrollVh12 = $(window).innerHeight() * 1 / 2;

let scrollVh23 = $(window).innerHeight() * 2 / 3;

// (각 div의 offset 값 - 원하는 특정 위치값) 변수 할당

let event12 = $('.scroll-12').offset().top - scrollVh12;

let event23 = $('.scroll-23').offset().top - scrollVh23;

$(window).scroll(function(){  

  // 화면의 1/2 지점 도달 시 이벤트 실행

  if($(this).scrollTop() > event12){

    $('.scroll-12').css('background','red');

  }

  // 화면의 2/3 지점 도달 시 이벤트 실행

  if($(this).scrollTop() > event23){

    $('.scroll-23').css('background','blue');

  }  

});

 

See the Pen [jQuery] scroll animation at a specific position _ 특정 위치 스크롤 애니메이션 by j. sik (@jsik) on CodePen.