iOSで、position:fixedをしている箇所が、タッチキーボードが出現すると消えてしまう

Question

現状

postion:fixed をしているheaderがあります。

入力欄にfocusをあて、タッチキーボードが出現すると、headerをfixedで固定しているにも関わらず、
画面からheaderが消えてしまいます。（端末はios）

ネットで調べたところ、iosで起こるバグのようで、
これが有力そうな回答ですが、
ここに出てきている以下のソースを編集して読み込ませても、
ソースを入れる前と後で挙動が変わりません。

$(function(){
  if (Modernizr.touch) {
    $(document)
    .on('focus', 'header > input', function(e) {
      var pos = $(window).scrollTop();
      $('html, body').scrollTop(pos);
      $('header').css({ top: pos });
    })
    .on('blur', 'header > input', function(e) {
      $('header').css({ top: 0 });
    });
  }
});

編集したあとのソースはこちらです。
(Modernizeのif文を削除し、functionの書き方を修正しました)

Local.test = function(){
	$(document)
.on('focus', 'input', function() {
		$body.addClass('fixfixed');
})
.on('blur', 'input', function() {
		$body.removeClass('fixfixed');
});
}
Local.test();

質問

$(document)の値は何か別のものに変えるべきでしょうか？
変えるのであれば、どういった値に変えるべきか教えていただけますでしょうかm(_ _)m
よろしくお願いいたします。

Comments

[m.ts10806]

タイトルと質問で聞きたいことにずれがあるように思います。
なるべく質問内容に寄せたタイトルにしてください。

[m.ts10806]

あと「うまくいきません」だと「何が起こったの？」ともう1確認必要になります。起きた現象をそのまま書いてください。
想定通りに動いていないだけで、何か現象は起きているはずです。
https://teratail.com/help/question-tips#questionTips3-4-1

[m.ts10806]

iOS以外、AndroidやPCのブラウザも試した結果も記載願います。
あとは・・・
HTML、CSSもあったほうが再現確認もできますので。

[miyabi_pudding]

jQueryの話でしょうから、JavaScriptのタグだけだと不十分です。
jQueryのタグもつけましょう。

[x_x]

$(function(){が消えていますが</body>直前に読み込んでいるのでしょうか？

Answer 1

このウェブサイトは解決方法かもしれません。

https://stackoverflow.com/questions/32407185/wkwebview-cant-open-keyboard-for-input-field