Wix Studio エディタ:スティッキーな要素とセクションを作成する
読了時間:2分
訪問者が上下にスクロールすると、セクションまたは要素がページに「くっつく」ように設定することができます。要素またはセクションが訪問者のビューポートに到達すると、上部、下部、またはその両方に固定されます。上または下からの距離であるオフセットを設定できます。
この記事では、以下の項目について説明します:
要素またはセクションにスティッキー配置を適用する
- 該当するセクション、または要素を選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「配置」までスクロールダウンします。
- 「配置タイプ」ドロップダウンから「スティッキー」を選択します。
- セクション / 要素がスティッキーになる位置(スクロール先)を選択します: 上、 下、または下と上
- (オプション)位置 % を入力して、上または下にスペースを作成します。
![上から 5% の位置で上にくっつくように設定された要素。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/15/11e98b00-b5db-4fea-b9d1-d45416179ebc/902c82a5-b414-4f21-b8d7-906387a9a939.jpg)
DOM 順序に関する注意事項:
デフォルトでは、セクションの順序を含むページの DOM 順序は自動的に整理されます。「スティッキー」なセクションを DOM 内で他のセクションの上に表示したい場合は、セクションを右クリックし、「アレンジ」を選択して「最前面へ移動」を選択します。
スティッキー配置を解除する
要素とセクションはいつでも既定の位置に戻すことができます。つまりビューポイントに達しても画面に「スティッキー」に配置されず、特定の位置に留まることを意味します。
スティッキー配置を解除する方法:
- 該当するセクション、または要素を選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「配置」までスクロールダウンします。
- 「配置タイプ」ドロップダウンから「既定」を選択します。
![要素設定パネルで要素またはセクションの既定の配置タイプを選択しています](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/15/5d1768c5-2080-40cb-8ad2-9f176e4dd907/d3501c2d-4c0c-4208-8894-b41f079582c8.jpg)
お役に立ちましたか?
|