質問: こんにちは。 sticky.jsで固定ヘッダーを実装しているのですが、どうしても不具合が生じます。 【内容】 ・sticky.jsで固定ヘッダーを実装 ・スクロール無しの場合はプレビュー / 実機ともに正常に動作 ・PCでGoogle Chromeでプレビュー表示をしてみると正常に動作する ・実機でスクロール時のみ、下記画像のようにメニューが全部表示されない。 ・実機のOSはiOS 10.3.3 ・実機ブラウザはGoogle Chrome、Safari両方にて問題が発生します。 問題のWebサイトを、内容をぼかして作ってみました。 http://browseworks.jp/text/index.html ![PCでのプレビュー表示](https://teratail.storage.googleapis.com/uploads/contributed_images/afdd6cea000b0d03af5c54b44e0fddee.jpeg) スマホで実機で表示してみるとこうなります。 ![スマホでの表示](https://teratail.storage.googleapis.com/uploads/contributed_images/9d311b66f628ffabb3c6d62b0f537d34.jpeg) メニューが見えていないだけで、タップすると反応します。 おそらく、z-indexやsticky.jsで挿入されるheightの問題かと思うのですが、何をどうしてもいまいち解決しません。 恐れ入りますが、ご教授くださいますと幸いです。 よろしくお願いいたします。
回答: `div.wrapper`内に`.headerlogo`(上のバー)と`.drawer-nav`(右から出てくるメニュー)が存在しており、`.wrapper`が`overflow: hidden`、`.drawer-nav`が`position: fixed`となっています。 本来ならfixed要素は`overflow: hidden`な要素の中にあっても表示領域が制限されることはないらしい[1]ですが、iOSのブラウザではバグでそうなっていないのかもしれません([2]にも同様の報告)。 ``` .wrapper { overflow: visible; } ``` としてみてはどうでしょうか。 参考 [1]https://stackoverflow.com/questions/12463658/parent-child-with-position-fixed-parent-overflowhidden-bug [2]https://stackoverflow.com/questions/21414941/position-fixed-element-cut-off-by-parent-element-overflowhidden-ios7-mobile