[작업물] 모바일 - 디바이스마다 다른 div 높이값 구해서 더하기

https://m.adidas.co.kr/MO/Event/pnEvtView.action?pn=MYSHELTER

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

1과 2는 겹쳐진 마크업으로 짜여져있다.

 

내가 원하는 결과물 : 

absolute로 겹쳐진 item 이라는 div는 각각에 해당하는 네비게이션 버튼을 클릭시

opacity가 1이 되면서 화면에 떠야한다.

 

그런데... div에 absolute를 먹이면 높이값을 읽지 못하고 px로 정확한 높이값을 지정할 수 있는 웹과는 다르게

모바일의 경우 디바이스마다 각 내용물들의 높이가 다르게 측정이 되기 때문에

스크립트로 유동적인 높이값을 찾아서 직접 지정해주기로 했다. 

 

// 네비게이션 버튼 클릭시 실행되는 함수
$('.navi_wrap .navi').click(function(){
  var index = $(this).index();
  
  // 해당 아이템들의 높이값을 담을 배열 선언
  var itemchildDivArray = [];
  
  // 해당 아이템들을 감싸는 부모 태그 결정을 위한 변수 선언
  var thisitem = $('.items_wrapper .item').eq(index);
  
  // 해당 아이템 변수 선언
  var itemchildDiv = thisitem.children('.h');
  
  // 클릭한 네비게이션 index에 해당하는 태그에 클래스 on 부여
  $('.navi_wrap .navi').removeClass('on').eq(index).addClass('on');
  
  // 클릭한 네비게이션 index에 해당하는 아이템 부모에 클래스 on 부여
  $('.items_wrapper .item').removeClass('on').eq(index).addClass('on');
  
  // 해당하는 각 div 높이값 구해서 itemchildDivArray 배열에 넣기
  $(itemchildDiv).each(function(index, item){ 
    var geth = Math.round(itemchildDiv.eq(index).height());
    itemchildDivArray.push(geth);
  });
  
  // 배열에 넣은 높이값 총합 구하기
  var totalh = 0;
  for( var i = 0; i<itemchildDivArray.length; i++){
    totalh += itemchildDivArray[i];
  }
  
  // 다 더한 높이값을 부모태그에 넣어주기
  $('.items_wrapper').css({
  	'padding-bottom': totalh + 'px'
  });
});