[작업물] 페이지 스크롤 시 원하는 컨텐츠에 효과 먹이기

https://shop.adidas.co.kr/PF020620.action?pn=DONISSUE1

아디다스 공식 온라인 스토어

<div id = "">
    <div class="section scroll">...</div>
    <div class="section scroll">...</div>
    <div class="section ">...</div>
    <div class="section scroll">...</div>
    <div class="section scroll">...</div>
    <div class="section ">...</div>
</div>

* HTML 영역 안에 있는 박스들 중 스크롤 시 효과가 나타났으면 하는 DIV 태그에 지정한 클래스 추가하여 마크업.

(예시 마크업에선 scroll 이라 지정)

 

$(window).ready(function(){

 // 원하는 컨텐츠의 offsettop 값을 배열 안에 넣기
  var scrollArray = [];
  var scrollContent = document.querySelectorAll('.scroll');
    for(var i = 0; i<scrollContent.length; i++){
      var mypos = scrollContent[i].offsetTop;
      scrollArray.push(mypos)
    }

 // 스크롤 할 때마다 해당 컨텐츠에 on 이라는 지정한 클래스 값 넣기
  $(window).scroll(function(){
    var thispos = $(this).scrollTop();
      for(var pos = 0; pos<scrollArray.length; pos++){
      if(thispos>scrollArray[pos]){
      	$('#don_cp .scroll').eq(pos).addClass('on');
      }
    }
  });

});

 

* DIV 내에 있는 이미지 로딩 속도에 따라 offset top 값이 고정으로 읽히지 않는 경우가 있어

컨텐츠 offset.top 값을 구하는 소스를 window.ready 혹은 window.load 안에 넣어 고정 값을 구한다.

 

결과적으로,

scroll 이라는 DIV 컨텐츠를 가진 박스들이 각각에 해당하는 top 값에 페이지가 스크롤될 시

on이라는 클래스가 부여되면서 css 효과를 먹일 수 있다.