webページをスマホで閲覧する際、モーダルウィンドウを開いた時に背景がスクロールできてしまうと煩わしかったりするのでそれを固定します。

ざっくり言うとJavaScript(私の場合jQuery)を使って、モーダルウィンドウを開いた時に土台の要素のスタイルを操作して固定します。

html

土台の要素とモーダルウィンドウの要素を兄弟要素にします。

jQuery

まずモーダルウィンドウを非表示にしておきます。ただ実際は開くときにJavaScript等で要素を追加したりしたほうが良いかもしれません。

id open-modalをクリックしたときに変数pointYに現在のスクロール値を代入し、土台の要素のスタイルをposition: fixed;にします。その際topの値にpointYを設定します。これで土台の要素が固定されるので、モーダルウィンドウをfadeInさせます。

閉じるときは土台の要素にposition: relative;を設定します。加えて開くときに取得したスクロール値が入っているpointYをウィンドウのスクロール値に指定します。
これを関数にしてモーダルウィンドウがfadeOutしたときに呼んでいます。