質問: レスポンシブ対応のサイトを作成するに辺り、JQueryのmmenuを使用しているのですが、タブレットならびにスマートフォンの表示のみmmenuを使用するようにしております。 ハンバーガーメニュー自体は問題なく実装できたのですが、ページをスクロールした状態でハンバーガーメニューを押すとposition:fixedで固定したheader領域が消えてしまいます。 ページをスクロールせずトップの状態でハンバーガーメニューを押した場合は理想通りに表現できております。 ページをスクロールした場合でもトップの状態でハンバーガーメニューを押したように表現したいのですが上手くできず行き詰っており、お力をお貸しいただけないかと質問をさせて頂いた次第です。 (※パネル外をタッチすると開いた領域は閉じるようになっておりますが、よりわかりやすいように×印が見える状態にするのが理想です) こちらの掲示板で過去に似たような質問があり参考にしたのですが、参考URLが削除されており当方では解決に至りませんでした。リンク内容() 御多忙とは存じますが、お力添えいただければ幸いです。 問題の症状がわかるURLを下記に記載致しておりますので何卒よろしくお願い致します。 (URL) リンク内容(http://test-test.gonna.jp) ※ある程度作りこんだ後に不要な箇所を削除したりmedia screenを解除した状態のものをアップさせていただいております。申し訳ございませんが消し忘れの不要な箇所等があるかもしれません。
回答: position:fixedをかけた要素の親要素にtranslate3dが指定してあると 親要素からの相対位置になります。 メニュークリック時にmmenu.jsがcontainerクラスのdivにtransform:translate3dを指定しています。 headerをcontainerクラスの外にだしてみるのはどうでしょう