みなさんこんにちは！今回は、Webflowでナビゲーションのメニュー、モーダルを開いたときのスクロールを無効化する方法を紹介します。
今回の記事は動画でも紹介しています⏬
スクロール無効化のためのコード
$(document).ready(function() {
$('.class-name').click(function() {
$('body').toggleClass('overflow__hidden');
});
});
.class-nameの箇所を、メニューボタンのクラス名と合わせてください。overflow__hiddenというクラス名を作り、overflow:hidden;のCSSを当ててください。その後付与したクラスは外します。
コードの説明
.class-name箇所がクリックされた時、body要素に対してoverflow__hiddenというクラスを付与しています。bodyにoverflow:hidden;が付くと、画面がスクロールできなくなる特徴があります。
上手く動作しない場合
考えられるパターンとして、クラス名の書き方が間違っていることが多いです。WebflowのDesignerで付与しているクラス名がNav Buttonだとすると、コードで記載する際はnav-buttonという形になります。
Webflowの特徴として、・大文字→小文字・スペース→-(ハイフン)とクラス名をコードで記載する際は、調整してください。
まとめ
コードを追加、クラス名を合わせて、cssを付与するだけで簡単に実装ができます。Webflow標準の機能だけではできないことも、コードを記述するだけで実装することができます。
このほかにもWebflowの使い方や、Webflowを用いたWeb制作活動、自社サイトをWebflowで運用するメリットを紹介しています！質問やご相談があれば、いつでもお問い合わせからご連絡お待ちしています！
.svg)
