フルスクリーンナビゲーション時に、背面のコンテンツがスクロールしないようにするコード

コードはjQueryコードです。
次の例では、back はクラスであり、ナビゲーションが開かれているかどうかを判断するために使います。
!$(this).hasClass('back') の状態では、ナビゲーションはデフォルトで閉じています。

ナビゲーション開閉時のスクロール制御！jQueryで簡単実装

$(".toggle-btn").on("click", function (e) {
            if (!$(this).hasClass('back')) {
                $(this).addClass('back');
                $("html").css({
                   "height": "100%",
                   "overflow-y": "hidden",
                   "position": "fixed"
                });
            } else {
                $(this).removeClass('back');
                $("html").css({
                    "height:": "auto",
                    "overflow-y": "auto",
                    "position": "static"
                });
            }
        });

実装のポイント

ナビゲーション開閉状態を .back クラスで判定。

html 要素に position: fixed を適用し、スクロールを無効化。

CSSの状態を元に戻すことで自然にスクロールを復元。

コード解説

.toggle-btn 要素（トグルボタン）をクリックするたびに、ナビゲーションが開閉される仕組みです。

クラス back が付与されているかどうかで、ナビゲーションの状態（開いている/閉じている）を判定します。

ナビゲーションが開いている間は、html 要素のスタイルを変更し、ページ全体のスクロールを無効化します。

まとめ

フルスクリーンナビゲーションと背景スクロールの制御は、ユーザー体験（UX）向上のために非常に重要です。このコードでは、簡潔なロジックと jQuery を使ってそれを実現しており、実装コストも低く抑えられます。