ホームページでサブメニュー表示時に背面を固定したい（iPhone使用時）

ホームページでサブメニュー表示時に背面を固定したいです（iPhone使用時）

ハンバーガーボタンを押すと、画面いっぱいを覆うようにサブメニューが出てくるようにしています。
サブメニューが出るとbodyにoverflow:hiddenがつくようにしているのですが、
iphone(ios端末)ではbodyが固定されませんでした。
iphoneでも固定できる方法をご教授いただければと思います！

追記 9/6
その他にはメニュークリック時にposition:fixedをかけましたが、こちらもページ上部で固定になりました。

javascript
1
2  //iosメニュー表示時モーダル用
3  jQuery(window).on('touchmove', function(event) {
4    event.preventDefault();
5  });
6
7  //ハンバーガーボタンのアニメーション処理
8  document.addEventListener('DOMContentLoaded', function () {
9    menuButton.addEventListener('click', function (ev) {
10      ev.preventDefault();
11      this.classList.toggle('active');
12    });
13  });
14
15  //メニューボタン押下時処理
16  menuWrapper.addEventListener('click', function (event) {
17    //メニューが隠れている場合
18    if (nav.classList.contains('close')){
19      //メニューを開く
20      nav.classList.remove('close');
21      nav.classList.add('open');
22      //背景を固定する
23      body.classList.add('fixed');
24    //メニュー表示中の場合
25    } else {
26      //メニューを閉じる
27      nav.classList.add('close');
28      nav.classList.remove('open');
29      //背景固定を解除
30      body.classList.remove('fixed');
31    }
32  });