前提・実現したいこと
スマホ表示時にdrawer.js(http://git.blivesta.com/drawer/)を実装しているサイトを作っています。
メニュー展開時には背景のスクロールを固定するようにしたいです。
一応固定自体はできたものの、下記の問題点があります。
試したこと
下記サイトを参考にhtml,bodyに.fixedを付与する事で、背景の固定をする事ができましたが、問題点は後述します。
http://sublimelife.hatenablog.com/entry/2018/06/21/183718
drawer.jsの記述に則りセレクタを変更していますが、他は追記など行っておりません。
$('.drawer-toggle').on("click", function() { $('html, body').toggleClass('fixed'); });
問題点
メニューを閉じる際、付与した.fixedの削除をする必要がありますが
上記の記述では.drawer-toggle(この場合ハンバーガーボタン)をクリックしないと削除ができないと思うのですが、
drawer.jsはナビやハンバーガーボタン以外の部分をクリックしてもメニューが閉じますので、
その場合.fixedの削除がされずにスクロールができないページが表示されてしまいます。
あるいは、別の手段をご教授いただけましても大変助かります。
初めての質問で至らぬ点も多くあると思いますが、
どうぞよろしくお願いいたします。
他に試したこと
https://blog.mismithportfolio.com/web/20150529scrollfixed
上記サイトも同じく.fixedの削除の条件がボタンをクリックする事なので
同じ理由で行き詰ってしまいました。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。