ドロワーメニュー表示時、fixedさせているメニューボタンが動いてしまう。

お世話になっております。

こちらのサイト様を参考に、

プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS)

クリックで現れるメニューを実装しました。

このように、

メインコンテンツごとずれて、z-indexで下に隠しているメニューが現れる状態になっており、これは理想通りです。

ですが、少しでもスクロールしたあとでメニューを開くと、position:fixed;してあるメニューボタンが消えてしまいます。

このように、

青いハンバーガーボタンがなくなります。

メニューを閉じるとちゃんとスクロールした位置に出てくるですが、メニューを開いている間もその位置にいて欲しいのです。

html
1<body>
2  <!-- メニューオープン時メインコンテンツを覆うカバー -->
3  <div class="overlay js-overlay"></div>
4 <!-- スライドするコンテンツ -->
5  <div class="container">
6  <header id="header">ヘッダー
7     <div class="drawer-bars js-drawer">
8       <span class="drawer-bar"></span>
9       <span class="drawer-bar"></span>
10       <span class="drawer-bar"></span>
11     </div>
12  </header>
13  <main>コンテンツのなかみ</main>
14  <footer>フッター</footer>
15  </div><!--   end container  -->
16  
17<!-- 下にもぐっているメニュー　-->
18  <div class="js-back-menu">
19    <ul>
20      <li>めにゅー１</li>
21      <li>めにゅー２</li>
22      <li>めにゅー３</li>
23      <li>めにゅー４</li>
24      <li>めにゅー５</li>
25    </ul>
26  </div>
27  
28</body>

CSS
1.container {
2/*   コンテンツ本体の重なり順を設定 */
3  position: relative;
4  z-index: 2;
5}
6header {
7  height: 100px;
8  line-height: 80px;
9  background: #eee;
10}
11main {
12  height: 700px;
13  background: #ddd;
14}
15footer {
16  height: 50px;
17  background: #eee;
18}
19
20.drawer-bars {
21   display: inline-block;
22   position: fixed;
23   z-index: 4;
24   top: 20px;
25   right: 20px;
26   width: 50px;
27   height: 35px;
28  }
29
30.drawer-bar {
31  position: absolute;
32  -webkit-transition: all 0.3s ease-in-out;
33  transition: all 0.3s ease-in-out;
34  background: blue;
35  border-radius: 2px;
36  display: block;
37  height: 3px;
38  width: 100%;
39  -webkit-box-sizing: border-box;
40 　box-sizing: border-box;
41  }
42  .drawer-bar:nth-of-type(1) {
43    top: 0px;
44  }
45  .drawer-bar:nth-of-type(2) {
46    top: 42%;
47  }
48  .drawer-bar:nth-of-type(3) {
49    bottom: 0;
50  }
51  
52.js-back-menu {
53  position: fixed;
54  top: 0;
55  right: 0;
56  width: 80%;
57  height: 100%;
58/*   下に隠れているメニューの重なり順 */
59  z-index: 1;
60  overflow: auto;
61  background: #ddd;
62  text-align: center;
63  background: pink;
64}
65
66/* カバーの基本設定 */
67.overlay {
68  content: '';
69  visibility: hidden;
70  position: fixed;
71  /*   メニューオープン時に出てくるカバーの重なり順 */
72  z-index: 3;
73  top: 0;
74  left: 0;
75  display: block;
76  width: 100%;
77  height: 100%;
78  background: rgba(0, 0, 0, 0);
79  -webkit-transition: all .5s ease;
80  transition: all .5s ease;
81
82}
83
84/* .side-openのクラスがついたらコンテナとカバーをずらす */
85 .side-open .container,
86 .side-open .overlay {
87    -webkit-transform: translateX(-50%);
88    transform: translateX(-50%);
89    -webkit-transition: .5s;
90    transition: .5s;
91  }
92/* カバーの見た目設定 */
93 .side-open .overlay {
94    visibility: visible;
95    cursor: pointer;
96    background: rgba(0, 0, 0, 0.2);
97  }
98

jQuery
1var $body = jQuery('body');
2jQuery('.js-drawer').on('click', function () {
3  $body.toggleClass('side-open');
4
5jQuery('.js-overlay').on('click', function () {
6    $body.removeClass('side-open');
7  });
8});
9

コードが長くなってしまい、申しわけありません。

検証で見てみると、メニューを開いている時にボタンは最初（ページロード時）の位置に戻っているようです。
コンテンツ自体はちゃんとスクロールしたままの位置にいるのに、なぜボタンだけが元に戻ってしまうのでしょうか。

メニューを開いている時もメニューボタンにスクロールさせた位置にいてもらうには、どこを修正すれば良いのでしょうか。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

メニューボタン(drawer-bars)が、.containerブロック内に入っており、.containerブロックをtransform: translateX(-50%);で横移動させているのが原因と思われます。transformを使うとfixedが無効になるような挙動になるようです。

メニューボタン(drawer-bars)を.containerブロック外に出して、このままでは横移動しないので、transformで横移動させればいいでしょう。

html
1<body>
2  <!-- メニューオープン時メインコンテンツを覆うカバー -->
3  <div class="overlay js-overlay"></div>
4  <!-- メニューボタン -->
5  <div class="drawer-bars js-drawer">
6    <span class="drawer-bar"></span>
7    <span class="drawer-bar"></span>
8    <span class="drawer-bar"></span>
9  </div>
10  <!-- スライドするコンテンツ -->
11  <div class="container">
12    <header id="header">ヘッダー
13    </header>
14    <main>コンテンツのなかみ</main>
15    <footer>フッター</footer>
16  </div><!--   end container  -->
17
18  <!-- 下にもぐっているメニュー　-->
19  <div class="js-back-menu">
20    <ul>
21      <li>めにゅー１</li>
22      <li>めにゅー２</li>
23      <li>めにゅー３</li>
24      <li>めにゅー４</li>
25      <li>めにゅー５</li>
26    </ul>
27  </div>
28
29</body>

css
1/* .side-openのクラスがついたらコンテナとカバーをずらす */
2 .side-open .drawer-bars, /*追加*/
3 .side-open .container,
4 .side-open .overlay,
5  {
6    -webkit-transform: translateX(-50vw); /*修正 % → vw */
7    transform: translateX(-50vw);         /*修正 % → vw */
8    -webkit-transition: .5s;
9    transition: .5s;
10  }