아이폰 배경 fixed 이 반영안됨

---

pc에선 잘 보이지만 

아이폰에서 배경에선 배경 fixed (스크롤 움직였을때 배경이 고정된 상태로 움직이는 ) 가 반영이안됨

이미지가 확대되고 깨짐

안드로이드는 잘 보임 

 

  /* 아이폰에선 반영안됨 */

  /* background: url(../images/bg_main_vision.jpg) 50% 50% / cover fixed; */

---

다른방법으로 반영하기 (아이폰대응)

 

방법 1 배경으로 깔아준다. 

 

 

다른 섹션에 배경을 일일히 깔아주고,

현재 섹션을 배경 fixed 가 아닌

position 으로 띄우고 z-index로 맨 밑에 깔아준다. 

 

/* 아이폰에서 배경 fixed 막혀있음 */
.main_vision .bg_fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* 창기준으로 위치 상관없이 떠오름 */
  background: url(../images/bg_main_vision.jpg) no-repeat 50% 50% / cover;
}

 

 

문제점 

pc 및 안드로이드에선 잘 반영되지만 

아이폰 스크롤 튕김 현상으로 스크롤 시 밑에 배경이 다른섹션에서 보인다.

 

때문에 제이쿼리 스크롤 이벤트로 스크롤이 되면 배경자체를  숨켜버린다.

 

스크롤 탑으로 가리기

스크롤 탑이 요소의 위치보다 크면 맨위 <스크롤할떄> 요소가 페이지 상단까지 스크롤 - scrollTop 이 $('요소').offset().top 보다 클때 <밑에서 올라오는상황> 창높이만큼 덜 스크롤 했을때  요소가 아래에서 화면안으로 들어오는 경우 - srollTop이 $('요소').offset().top - $(window).outerHight() 보다 크면 <문서 아래까지 스크롤> 가장 바닥까지  - scrollTop이 $(document).outerHeight() - $(window).outerHeight() 만큼

즉 스크롤

 

$(function () {
  var winH = $(window).outerHeight();
  
  $(window)
  .on('scroll', function () {
  var st = $(this).scrollTop();
      
  // 배경고정효과
  if (st < 200 || st > $(document).outerHeight() - winH) {
  $('.main_vision .bg_fixed').addClass('hide');
  } else {
  $('.main_vision .bg_fixed').removeClass('hide');
  }
      
      
  })
  .trigger('scroll');

win 은 윈도우의 창 높이이다.

st 는 스크롤의 위치이다.

winH 는 윈도우 창높이 이다.

 

만약 스크롤의 위치가 200 보다 작거나

또는 (||)  스크롤의 위치가 '바닥에서의 창높이 '창높이를 뺀 값'보다 크면

(내가 지금 현재 보고있는 화면이 아니므로 다른곳에서 나오지않게)

 

배경이미지를 숨기고 

아니면 보여라 

 

---

 $(document).outerHeight()

document 는 html 문서 전체이므로 outerHeight은 문서 전체의 높이 

 

 

 

 

 

 

$(window).outerHeight()

window의 창높이 

 

 

즉 맨 아래값을 구할때

스크롤바 창 높이를 제외한 값으로 구해야한다 

 

 

if (st < 200 || st > $(document).outerHeight() - winH - 200)

 

거기서 200만큼 더 빼서 미리 배경을 숨켜줘라