Studioでスクロール時の追従(Sticky)機能を作成する方法を徹底解説！
「Studioでヘッダーを追従させたい」 「追従(Sticky)機能の実装方法が知りたい」
そんな悩みを持つ方も多いのではないでしょうか。
本記事では、Studioでスクロール時に要素を追従させる方法と機能実装時の注意点を解説していきます。
Studioエキスパートならではの知見も織り交ぜながら解説しておりますので、ぜひ最後までお読みください。
本記事の内容
- Studioでスクロール時に追従機能を実装する方法
- Studioの追従機能の活用事例5つ
- 追従機能を実装する際の注意点2つ
社内でサイト制作ができずに、お困りではありませんか？
スタートアップや広告代理店の方へ
・Web知識が少ないスタッフでも管理・更新できるWebサイトが欲しい
・1ヶ月以内&限られた予算内でWebサイトを制作したい
・ノーコードでのサイト制作を丸投げできるパートナーを探している
Webサイト制作・運用のコストを抑えたい方は、ぜひ以下のフォームからお問い合わせください。
Studioの指導者数100名超えの代表が納品時に操作レクチャーを行いますので、自社で活用できるか不安な方でもご安心ください。
ホームページ経由でお問い合わせをいただいた方には、StudioでWebサイトを運用して、売上を数倍に上げるために押さえるべきチェック項目をまとめた限定資料をお渡しさせていただきます。
目次
Studioでスクロール時の追従(Sticky)機能を作る方法
Studioでは以下の手順で追従(Sticky)機能を実装することができます
それぞれ詳しく解説します。
参考：Studioの制作代行サービスとは？費用相場や依頼時の流れを解説！
手順1.ボックスを配置
手順1では、ボックスを配置します。
追従設定を行うボックスをStudio内に配置しましょう。
ボックスは1つでもリスト形式でも問題ありません。
手順2.配置から追従(Sticky)を選択
手順2では、配置から追従(Sticky)を選択します。
手順1で配置したボックスの配置を追従に変更します。
手順3.追従を指定したボックスの固定位置を決める
手順3では、追従を指定したボックスの固定位置を決めます。
上下左右のうち画面の端からどのくらいの距離になったら追従を行うかを指定します。
以下の画像は画面下部から10pxの距離にボックスがあるときに追従(Sticky)が行われます。
Studioで追従(Sticky)機能を活用する方法4つ
StudioではStickyを使用することで以下のような追従機能を作成することができます。
それぞれ詳しく解説します。
活用法1.追従ヘッダー
活用法1つ目は、追従ヘッダーです。
追従(Sticky)を使用することで、ヘッダー追従させることが可能です。
固定でヘッダーを実装する場合よりも柔軟なヘッダーを作成することができます。
また、固定ヘッダーの場合は1つ下の要素がヘッダーの下に入り込んでいましたが、追従の場合はそのようなことは起こりません。
活用法2.追従サイドバー
活用法2つ目は、追従サイドバーです。
追従(Sticky)を使用することで、サイドバーを追従させることが可能です。
追従サイドバーを作ることによってサイドメニューを特定のボックス内で表示することができるようになります。
活用法3.縦・横スクロール時の要素重ね
活用法3つ目は、縦・横スクロール時の要素重ねです。
追従(Sticky)を使用することで、要素同士が重なるような横スクロールを実装することが可能です。
実装手順は以下の通りです。
- 画像を横並びに配置
- 各画像の配置を追従に変更
- 位置の左側を0にする
ちなみに縦スクロールも同じ要領で実装することができます。
活用法4.画面の下部への要素追従
活用法4つ目は、画面の下部への要素追従です。
追従(Sticky)を使用することで、画面の下部に要素を追従させることが可能です。
実装手順は以下の通りです。
- ボックスの右下に追従させたいボックスを配置
- 配置を追従に変更
- 位置の下側を任意の値(10など)にする
活用法5.追従CTA
活用法5つ目は、追従するCTAを作ることです。
追従(Sticky)を使用することで、画面の下部にCTAを追従させることが可能です。
追従CTAを実装することでスクロールに応じてお問い合わせやLINE登録ボタンを目立つ形で配置することができます。
Studioで追従(Sticky)機能を実装る際の注意点
Studioで追従(Sticky)機能を実装する際の注意点は以下の2つです。
それぞれ詳しく解説します。
注意点1：追従位置の設定状況は、エディタ上では確認できない
1つ目の注意点は、追従位置の設定状況は、エディタ上では確認できないことです。
追従位置の設定状況は、エディタ上では確認できないため、動作確認はプレビュー画面で行う必要があります。
注意点2：追従機能を使うためには親要素のはみ出し設定を表示にする
2つ目の注意点は、追従機能を使うためには親要素のはみ出し設定を表示にすることです。
追従位置が適応されるには、親要素のはみ出し設定を表示にする必要があります。
非表示、またはスクロールで追従を選択した場合にはスクロールが優先され、追従設定は無効となります。
まとめ
本記事では、Studioでスクロール時に追従機能を実装する方法と注意点について解説しました。
追従(Sticky)機能を活用することでStudio実装の幅を拡げることが可能です。
執筆者
松永勇樹
ノーコード専門メディア「ノクステック」運営。STUDIO Experts加盟。
Web講座の事業責任者を経て、ノクステックを設立。