iOS에서 배경 고정하는 방법에 대한 고민 후 결론

background-attachment: fixed 사용

.bg {
    background: url("#{$imgPath}/bg.png") no-repeat;
    background-attachment: fixed;
    ...
}

이 방법이 정상적인 방법이지만 현재 확인되는 바로는 iOS11에서도 Safari와 Chrome에서는 지원하지 않음.

배경고정용 엘리먼트 사용

차선책으로 움직일 엘리먼트를 하나 만들고 그 엘리먼트를 스크립트로 직접 움직이는 방법

  $.fn.bgMove = function() {
    var $this = $(this);

    if (!$this.length) {
      return;
    }

    var bgEl = $this.find('.moveBG');
    var $headerMenu = $('.pageHeader');

    var scrollEvent = function() {
      var $win = $(this);

      var metas = {
        wt: $win.scrollTop(),
        wh: $win.innerHeight(),
        tt: $this.offset().top,
        th: $this.height()
      };

      if (metas.wt + metas.wh > metas.tt || metas.wt < metas.tt + metas.th) {
        var moveScroll = metas.wt - metas.tt + $headerMenu.height();
        moveScroll = Math.abs(moveScroll) > metas.wh ? metas.wh : moveScroll;

        bgEl
          .css('height', metas.wh)
          .velocity({
            translateY: moveScroll
          }, 0);
      }
    };

    $(win).on('scroll', scrollEvent);
  };

  $('.moveBG').bgMove();

높이는 jQuery CSS로 지정했지만 직접적으로 움직이는 부분에서 속도면에서 나은 Velocity.js를 사용.