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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

6948閲覧

Drawer.jsで背景の固定をしたい

fu_ji

総合スコア44

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2018/07/09 07:26

編集2018/10/22 01:11

前提・実現したいこと

スマホ表示時に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の削除の条件がボタンをクリックする事なので
同じ理由で行き詰ってしまいました。

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました。

まずこちらのサイトを参考に、下記記述をしてみました。

lang

1 var scrollpos; 2 3 $(document).ready(function() { 4// ドロワーナビが開いたとき 5 $('.drawer').drawer(); 6 $('.drawer').on('drawer.opened', function(){ 7 scrollpos = $(window).scrollTop(); 8 $('html,body').addClass('fixed').css({'top': -scrollpos}); 9 }); 10// ドロワーナビが閉じたとき 11 $('.drawer').on('drawer.closed', function(){ 12 $('html,body').removeClass('fixed').css({'top': scrollpos}); 13 window.scrollTo( 0, scrollpos ); 14 }); 15 });

css

1 2 .fixed { 3 overflow: hidden; 4 position: fixed; 5 height: 100%; 6 width: 100%; 7 }

背景の固定はするし、質問内容の問題点のクラスの解除も条件を変えたのでクリアです。
ただ、最上部までスクロールしてしまう挙動があり、(おそらく.fixedのCSS、position:fixed;のせいかと)
そちらをうまく扱う事が出来なかった為、別のサイトを参考に下記の記述に変更しました。

lang

1 var movefun = function( event ){ 2 event.preventDefault();} 3 4 $(document).ready(function() { 5// ドロワーナビが開いたとき 6 $('.drawer').drawer(); 7 $('.drawer').on('drawer.opened', function(){ 8// スクロール停止の処理 9 window.addEventListener( 'touchmove' , movefun , { passive: false } ); 10 }); 11// ドロワーナビが閉じたとき 12 $('.drawer').on('drawer.closed', function(){ 13// スクロール停止することを停止する処理 14 window.removeEventListener( 'touchmove' , movefun, { passive: false } ); 15 }); 16 });

以上でばっちり固定されました。

投稿2018/07/10 01:01

編集2018/11/22 09:16
fu_ji

総合スコア44

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問