【Studio初心者ガイド】追従(Sticky)機能とは?スクロールに応じたレイアウト｜Editor 5.0対応

※本記事は Studioの「Editor 5.0」に対応しています。

Studioの新機能「追従（Sticky）」は、スクロール中に特定の位置で一時的に固定され、その後さらにスクロールすると自動的に解除される機能です。

本記事では、Studio初心者でも簡単に使いこなせるよう、設定方法や活用事例を詳しく解説します。

Studioの追従(Sticky)とは?

Studioの追従(Sticky)は、要素がスクロールに応じて特定の位置で固定され、さらにスクロールが進むと解除される仕組みです。

例えば、以下のような動きを実現できます。

• ページをスクロールすると、サイドメニューが一定の位置で止まり、さらにスクロールすると消える

• 記事のタイトルが途中まで固定表示され、読み進めると通常の流れに戻る

• 画面下部にあるボタンがスクロールに応じて一定時間表示される

このように「一定の条件下でのみ固定表示できる」のが、「追従(Sticky)」の特徴です。

ボックスの配置

Studioでは、これまで相対位置(Relative)、固定位置(Fixed)、絶対位置(Absolute)の3種類の配置方法が用意されていました。

これらは、要素を自由に配置するための基本的なオプションとして活用されてきましたが、新たに追従位置(Sticky)が追加され、より柔軟なレイアウトが可能になりました。

追従(Sticky)以外のボックスの配置一覧

この3つに加え、新たに追従位置(Sticky)が追加されたことで、スクロールに応じた動的な配置が可能になりました。

相対位置(Relative)、固定位置(Fixed)、絶対位置(Absolute)について、詳しくは「【STUDIO初心者ガイド】相対位置・固定位置・絶対位置について知る 」をご覧ください。

Studioで追従(Sticky)を設定する方法

Studioで要素を追従（Sticky）させる設定は、配置オプションから行います。

【注意】追従位置は、親要素の [はみ出し] 設定が [表示] の場合にのみ有効になります。
[非表示] や [スクロール] が設定されている場合、スクロールが優先されるため、追従の動作は適用されません。

まず、追従させたい画像やボックス要素を配置します。

次に、その要素を選択し、配置オプションから「追従」（赤四角）を設定します。

追従を開始する位置は、親要素の四辺からの距離（赤四角）を数値で指定します。

数値を入力した方向に対して、要素がその位置に到達すると追従が有効になります。

設定後は、ライブプレビューで実際のスクロール挙動を確認してください。追従の動作はエディタ画面上では確認できないため、プレビューでの確認が必要です。

手順1. 画像またはボックスを追加

まずは、追従させたい要素(赤四角)を追加します。

手順2. 配置を「追従」に変更

追加した要素を選択し、右側パネルの「ポジション」[位置]の中から「追従(Sticky）」(赤四角)を選択します。これにより、スクロール中に特定の位置で固定される設定になります。

手順3. 固定位置を設定

右側パネルの「ポジション」[距離]に、親ボックスの四辺からの距離を数値(単位：px)で入力すると、画面の上下左右のうち、どの位置から追従を開始するかを指定できます。

例えば、画面下部から10pxの位置（赤四角)に設定すると、その距離にボックスがあるとき追従(Sticky)が適用されます。

設定が完了したら、ライブプレビューで動作を確認しましょう。エディタ画面では反映されないため、必ずプレビューを使って確認することが大切です。

追従(Sticky)の活用事例

追従(Sticky)を活用することで、スクロールに応じた動的なレイアウトを実現できます。以下のような使い方が可能です。

① ヘッダーやサイドメニューを追従させる

スクロールしてもヘッダーやサイドメニューを画面内に固定することで、ユーザーがナビゲーションしやすくなります。

長いページでも、必要なメニューやリンクへすぐにアクセスできるため、利便性が向上します。

② 横スクロール・縦スクロールで要素を重ねる

スクロールに合わせて要素が重なりながら表示される動きを作ることができます。

例えば、背景とテキストがスムーズに切り替わるデザインや、スクロールに連動して画像が入れ替わるような演出が可能になります。

③ 画面下部に要素を追従させる

ページのスクロールに応じて、画面下部に固定表示するボタンやバナーを設定できます。

お問い合わせやキャンペーン情報を目立たせる際に便利で、ユーザーのアクションを促しやすくなります。

まとめ

Studioの追従(Sticky)機能を活用することで、スクロールに応じた柔軟なレイアウトを実現できます。

ヘッダーやサイドメニューを固定したり、特定のコンテンツを目立たせたりと、使い方次第でサイトの操作性が大きく向上します。

サイトを訪れる人にとって、より見やすく快適なレイアウトを作るために、ぜひ追従(Sticky)を活用してみてくださいね。