Wix Studio エディタ:スティッキーな要素とセクションを作成する
読了時間:3分
訪問者が上下にスクロールすると、セクションまたは要素がページに「くっつく」ように設定することができます。要素またはセクションが訪問者のビューポートに到達すると、上部、下部、またはその両方に固定されます。上または下からの距離であるオフセットを設定できます。
Wix Studio アカデミーにアクセスして、その他の Wix Studio ウェビナー、チュートリアル、コースをご覧ください。
この記事では、以下の項目について説明します:
ヒント:
ヘッダースクロールエフェクトを追加して、訪問者が上下にスクロールした際の表示方法を変更します。たとえば、スクロール中にヘッダーの色を変えたり、邪魔にならないようにヘッダーを移動させたりして、訪問者がページに集中できるようにします。
要素またはセクションにスティッキー配置を適用する
- 該当するセクション、または要素を選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。

- 「配置」までスクロールダウンします。
- 「配置タイプ」ドロップダウンから「スティッキー」を選択します。
- セクション / 要素がスティッキーになる位置(スクロール先)を選択します: 上、 下、または下と上
- (オプション)位置 % を入力して、上または下にスペースを作成します。

DOM 順序に関する注意事項:
デフォルトでは、セクションの順序を含むページの DOM 順序は自動的に整理されます。「スティッキー」なセクションを DOM 内で他のセクションの上に表示したい場合は、セクションを右クリックし、「アレンジ」を選択して「最前面へ移動」を選択します。
スティッキー配置を解除する
要素とセクションはいつでも既定の位置に戻すことができます。つまりビューポイントに達しても画面に「スティッキー」に配置されず、特定の位置に留まることを意味します。
スティッキー配置を解除する方法:
- 該当するセクション、または要素を選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。

- 「配置」までスクロールダウンします。
- 「配置タイプ」ドロップダウンから「既定」を選択します。

役立つチュートリアル
スティッキーな要素やセクションを使用して作成できる面白いエフェクトはたくさんあります。Wix Studio アカデミーの動画をチェックして、オプションを検討してください: