Sticky
Sticky 上
sticky は形容詞で、「貼り付ける」を意味する動詞 stick に由来しています。 貼り付くものは、ベタベタしている、つまり sticky な場合が多いでしょう。
Sticky なし
左側のテキストは、Sticky の設定がされているので、ページをスクロールしても固定されているようになる。
設定
![sticky_conf](https://www.i-mndks.info/digital/wp-content/uploads/2023/07/sticky_conf-700x518.webp)
この場合は、テキストエディターを編集で
ページをスクロールさせた時にテキストの部分を上縁に固定させ、下側は枠内までテキストが移動してきたら、スクロールする。(わかりずらい!)
- ウィジェット名 編集
- 高度な設定
- モーション効果
- Sticky なし ➡︎ 上
- Offset 45 (このサイトはメニューの一部縦45pxをStickyしているので、)
- Sticky to Colum 下側のコンテンツに被らないようにするため
用途
Sticky は、表示を固定できるので、サイトやページの現在地を知るためのマップのような役割に有用だと考えます。
- メニューバーを上端に固定
- サイドバーの目次を固定
Tips
Sticky を安定して使う場合、
枠ごと、つまり、セクション・コラムやコンテナー※の中にウィジェットを入れて、枠にモーション効果を適応する方が良い。
※コンテナーは、セクション・コラムに代わるElementorの新しい機能の一つ。
Z-Index の理解が必要
ウイジェットやコンテナーのレイヤーという考え方で、Z-Index の数値の大きいものほど上側、すなわち、表面側に表示される。
Z-Index が 1 と 2 が重なったら、2が優先される。
![elementor z-index](https://www.i-mndks.info/digital/wp-content/uploads/2023/07/zindex-700x525.webp)
![](https://www.i-mndks.info/digital/wp-content/uploads/2023/07/z-index1.webp)
![](https://www.i-mndks.info/digital/wp-content/uploads/2023/07/z-index2.webp)
![](https://www.i-mndks.info/digital/wp-content/uploads/2023/07/z-index3.webp)
Sticky の機能を使いたい部分は、ヘッダーとフッターの固定だろうと考えます。
ページのヘッダーとフッターをスティッキーで固定したサンプルページです。
下の画面で、上スクロールすると、ヘッダーとフッターは固定されているが、ボディだけスクロールする。
画面の動きが理解でききましたか?
下のページのリンクは、こちら
関連記事
![OM SYSTEM TG-7](https://www.i-mndks.info/digital/wp-content/uploads/2024/01/tg-7_eye-300x300.webp)
OM SYSTEM Tough TG-7 インプレッション 風景
タフ系の解像度12MPコンパクトカメラ「Tough TG-7」普段使いできるのか画質を検証してみよう。
![awesome icon](https://www.i-mndks.info/digital/wp-content/uploads/2024/01/awesome_icon-300x300.webp)
![iframe_html](https://www.i-mndks.info/digital/wp-content/uploads/2023/08/iframe_html-300x300.webp)
![scrolling effects sample page](https://www.i-mndks.info/digital/wp-content/uploads/2023/08/scrolling_sample-300x300.webp)