質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1032閲覧

JQuery/mmenuのハンバーガーメニューにposition:fixedが効かない

yasu16

総合スコア3

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/08/09 08:02

編集2019/08/09 08:19

レスポンシブ対応のサイトを作成するに辺り、JQueryのmmenuを使用しているのですが、タブレットならびにスマートフォンの表示のみmmenuを使用するようにしております。

ハンバーガーメニュー自体は問題なく実装できたのですが、ページをスクロールした状態でハンバーガーメニューを押すとposition:fixedで固定したheader領域が消えてしまいます。
ページをスクロールせずトップの状態でハンバーガーメニューを押した場合は理想通りに表現できております。
ページをスクロールした場合でもトップの状態でハンバーガーメニューを押したように表現したいのですが上手くできず行き詰っており、お力をお貸しいただけないかと質問をさせて頂いた次第です。
(※パネル外をタッチすると開いた領域は閉じるようになっておりますが、よりわかりやすいように×印が見える状態にするのが理想です)

こちらの掲示板で過去に似たような質問があり参考にしたのですが、参考URLが削除されており当方では解決に至りませんでした。リンク内容(https://teratail.com/questions/143004)

御多忙とは存じますが、お力添えいただければ幸いです。
問題の症状がわかるURLを下記に記載致しておりますので何卒よろしくお願い致します。

(URL)
リンク内容(http://test-test.gonna.jp)

※ある程度作りこんだ後に不要な箇所を削除したりmedia screenを解除した状態のものをアップさせていただいております。申し訳ございませんが消し忘れの不要な箇所等があるかもしれません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

position:fixedをかけた要素の親要素にtranslate3dが指定してあると
親要素からの相対位置になります。
メニュークリック時にmmenu.jsがcontainerクラスのdivにtransform:translate3dを指定しています。

headerをcontainerクラスの外にだしてみるのはどうでしょう

投稿2019/08/09 08:45

yxt003

総合スコア184

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasu16

2019/08/09 09:39

yxt003様 ご回答心よりお礼申し上げます。 早速教えていただいたcontainerクラスからheaderを外に出してみるとスクロールをした状態でもheader要素が上部で固定され理想に近い表示になりました。 ただ×印を押してもドロワーメニューが閉じないため、mmenu.jsにheaderを押しても閉じるように新たに付け加えることができればheader要素にある×印を押しても閉じるようになるという認識で間違いないでしょうか? (URL) http://test-test.gonna.jp/index-02.html 当方の知識が足りないためいただいたアドバイスで解決することができず申し訳ございません。 お手すきの時で結構ですのでご返答いただければ幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問