スライドメニューを表示したときページ全体にレイヤーをかけたい

前提・実現したいこと

jQueryでスライドメニューを作っています。
メニューが表示されたとき、それ以外の部分にレイヤーをかけたのですが、画面いっぱいしか表示されず、スクロールすると消えてしまいます。
どうしたらページ全体にレイヤーをかけられるか教えていただきたく、質問致しました。
エラーメッセージはありません。

該当のソースコード

HTML
1  <header>
2    <div class="container">
3      <span class="menu-icon fa fa-bars menu-icon fa-fw"></span>
4      <span class="menu-icon fa fa-times fa-fw"></span>
5    </div>
6  </header>
7
8  <!--オーバーレイ-->
9  <div class="overlay"></div>
10  <!--スライドメニュー-->
11  <nav id="slide-menu">
12    <h2>MENU</h2>
13    <ul>
14      <li><a href="#lesson">レッスン</a></li>
15      <li><a href="#" class="signup-show">新規登録</a></li>
16      <li><a href="#" class="login-show">ログイン</a></li>
17    </ul>
18  </nav>

CSS
1* {
2  box-sizing: border-box;
3}
4
5html, body {
6  height: 100%;
7}
8
9body {
10  margin: 0;
11  height: 100%;
12  font-family: "Hiragino Kaku Gothic ProN";
13}
14
15/*オーバーレイ設定*/
16.overlay {
17  content: "";
18  display: block;
19  width: 0;
20  height: 100%;
21  background-color: rgba(0, 0, 0, 0.5);
22  position: absolute;
23  top: 0;
24  left: 0;
25  z-index: 2;
26  opacity: 0;
27  transition: opacity .5s, width 0s .5s, height 0s .5s;
28}
29
30.overlay.open {
31  width: 100%;
32  height: 100%;
33  opacity: 1;
34	transition: opacity .5s;
35}
36
37/*スライドメニュー*/
38.slide-menu {
39  position: fixed;
40  top: 0;
41  right: 0;
42  bottom: 0;
43  left: 0;
44  background-color: rgba(0, 0, 0, 0.6);
45  z-index: 2;
46  display: none;
47}
48
49#slide-menu {
50  width: 80%;
51	max-width: 300px;
52	height: calc(100vh - 65px);
53	position: fixed;
54	top: 65px;
55	right: 0;
56	z-index: 3;
57	background-color: #fafafa;
58
59
60	display: block;
61        transform: translateX(100%);
62        transition: transform 1s;
63
64}
65
66#slide-menu.active{
67        transform: translateX(0);
68    }

jQuery
1window.addEventListener('DOMContentLoaded', function(){
2
3  $('.menu-icon').click(function(){
4        $('#slide-menu').toggleClass('active');
5        //メニューを表示
6        if($('#slide-menu').hasClass('active')) {
7          // ハンバーガーアイコンを管理する
8          $('.fa-bars').hide();
9          $('.fa-times').show();
10          //オーバーレイを管理する
11          $('.overlay').addClass('open');
12        //メニューを非表示
13        }else {
14          // ハンバーガーアイコンを管理する
15          $('.fa-times').hide();
16          $('.fa-bars').show();
17          //オーバーレイを管理する
18          $('.overlay').removeClass('open');
19        }
20      });
21
22      //オーバーレイをクリックしてメニューを非表示
23     $('.overlay').click(function(){
24       if($('#slide-menu').hasClass('active')) {
25         //メニューを非表示
26         $('#slide-menu').removeClass('active');
27         //アイコンを変更
28         $('.fa-times').hide();
29         $('.fa-bars').show();
30         //オーバーレイを非表示
31         $('.overlay').removeClass('open');
32         $('.open').css('transition-duration', '5s');
33       }
34     });
35});

試したこと

htmlとbodyをheight:100%;にして、オーバーレイもアクティブのとき100%にしましたが、できませんでした。
また、オーバーレイ自体のheightを500%など画面より大きい数字にしましたが、端末によってページのheightが変わってくるため、レイヤーが足りなかったり余ったりしてしまいました。

足りない情報等ございましたら、教えて頂ければ幸いです。
追記致します。
ご回答お待ちしております。

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

回答1件

ベストアンサー

overlayのpositionをfixedにしてみてはいかがでしょうか。

CSS
1  .overlay {
2    position: fixed;
3    left: 0;
4    top: 0;
5    width: 100vw;
6    height: 100vh;
7    opacity: 1;
8      transition: opacity .5s;
9}