아이폰 fixed 태그 적용해보기(모바일 하단 고정)

반응형웹을 개발하다가 아이폰에서 버그가 생기는걸 발견하였습니다. 아이폰 fixed 태그 문제였는데요. 사파리에서는 position:fixed 가 제대로 먹히지가 않았습니다. 그래서 제이쿼리로 해결을 하려고 했는데 아이폰에서만 유독 문제가 생겨서 골치가 좀 아팠어요.

 

 

 

갤럭시 가상화면입니다. 의도하였던건 하단에 이렇게 스크롤이 되더라도 계속 붙어서 고정이 되게 하는 거였는데 아이폰에서는 제대로 표현이 안되더군요. 가운데에 붕떠버리는 현상이 생겼습니다.

 

 

 

 

 

실패한 코드입니다.

  if($(window).width()< 767 ){
   if($(this).scrollTop() > 20 ) {
    $("#mobile_nav").css("display","block").css("top",$(this).scrollTop()+$(window).height()-50);
    $("#mobile_nav").css("display","block");

   }

  }else{
   $("#mobile_nav").css("display","none");
  }

 

제이쿼리의 경우 전체 문서의 길이에서 현재 스크롤된높이를 마이너스한 값으로 기준을 잡았는데 아이폰의 경우 주소창이 작아지면서 현재 기준잡은 위치가 틀어지는 현상이 발견되었습니다. 고민을 하다가 구글링을 하였는데 좋은 소스가 있었습니다. 아이폰 fixed 태그는 구글에 상당히 많이 있기는 한데, 정작 쓸만한건 보이지가 않더라구요.

 

 <!--모바일일 경우 바닥에 고정 -->
 <script>

 var el;
 var doc_height = window.innerHeight+window.outerHeight-410 ;

 window.onresize = window.onscroll = function () {
  var lowerleft = [window.pageXOffset,(window.pageYOffset+window.innerHeight)];
  var lowerright = [(lowerleft[0] + window.innerWidth),lowerleft[1]];

  if(parseInt(doc_height) > parseInt(lowerleft[1]-el.offsetHeight)){

   el.style.top = lowerleft[1]-el.offsetHeight + 'px';
  }

 

 }

 window.onload = function () {
  el = document.getElementById('mobile_nav');
  window.onresize();
 }

 </script>

 

'mobile_nav' 라는 아이폰 fixed 태그를 바닥에 고정시키는 스크립트였습니다. 원소스는 버그가 있어서 아이폰용으로 제가 수정을 좀 했습니다.

 

출처를 남기고 싶었는데 정신없이 찾다보니 이미 다시 찾기가 힘들더라구요..

 

이소스를 사용하니 바닥에 잘 붙기는 하는데 문제가 스크롤이 계속 멈추지 않고 진행이 되는 버그가 생겼습니다. 그래서 특정 높이가 되었을때 스크롤을 막을 수 있게 높이 계산하는 함수를 추가를 하였습니다.

 

 

문서전체의 크기는 고정이 되었는데, 아이폰에서는 추가적인 높이가 또 생기더라구요. 다른 폰으로 테스트를 했는데 유독아이폰에서만 이런 버그가 나타나는것 같습니다.

 

아이폰 공백을 위해서 -410 값을 주었구요. 테스트한 기기들에서는 별 문제가 없었습니다. 또다른 버그가 있으면 고쳐야죠 뭐 ㅎㅎ

 

다운로드 링크 : 소스.txt

 

그럼 잘 활용하셔서 더 좋은 코드로 만들어 보시길 바랄께요.