【css・js】スマホメニューの「position: fixed;」の使い方

やりたいこと

ハンバーガーメニューを押す
↓
全体が暗転
↓
メニューが出てくる
↓
メニューはスクロール可能
↓
後ろのコンテンツは固定
↓
再度ハンバーガーメニューを押したら押した位置で暗転解除

ソースコード

jquery

jQuery(function($){
    var scrollPos;//グローバルで初期かしておかないと上にもどっちゃう
    $('ボタン').on('click', function() {
        if($('body').hasClass('fix')){
            $('body').removeClass('fix').css('top',0 + 'px');
            window.scrollTo( 0 , scrollPos );//初期化
        }else{
            scrollPos = $(window).scrollTop();//現在のスクロール位置
            $('body').addClass('fix').css('top',-scrollPos + 'px');
        }
    });
});

ボタンを押したらbodyにclassを付与して現在のスクロール位置をcssでbodyに与える
再度ボタンを押したらclassとcssは解除

css

body.fix{
    position: fixed;
    /*指定しておかないとなんか右側が空く*/
    width: 100%;
}
.メニュー{
    /*↓書き方次第では不必要*/
    background: rgba(0, 0, 0, .8);
    display: none;
    /*↓必要*/
    height: 100%;
    width: 100%;
}
body.fix .メニュー{
    /*↓書き方次第では不必要*/
    display: block;
    color: white;
    padding: 20px;
    /*↓必要*/
    position:fixed;
    top: 0;
    overflow-y: scroll;
    /*スマホ時に慣性スクロールでヌルットスクロールさせるやつ*/
    -webkit-overflow-scrolling:touch;
}