Diviでスティッキーエレメントを作る

Diviでスクロールしても付いてくるスティッキーなエレメントを作る二つの方法【好きな位置に固定出来る!】

こんにちはナオミです。

「Diviを使って画面にヘッダーを固定したい」
「スクロールの途中から画面にフッターを固定したい」

スクロールしても画面に固定され付いてくるヘッダーやメニュー、実はDiviで簡単に作れるんです。
モジュールや行やセクション全てで同じことができます。
しかもCSSは一切書きません。

これを実現するには二つの方法があります。
一つはエレメント(セクションや行やモジュール)を常に一つの場所に固定する方法
もう一つはユーザーがスクロールして、そのエレメントが特定の場所にきた時だけ固定する方法です。

この記事をよめば自由に画面上のエレメントを固定することができるようになります。

エレメントを常に一つの場所に固定する方法

動画はこちらです。

この記事を読み終わる頃には、あなたも自由にどんなエレメントでもスティッキーに出来るでしょう。

スティッキーにする方法

スティッキーヘッダー
青い部分がセクション

例えば、スティッキーヘッダーやフッターを作りたかったらセクション全体をスティッキーにするのがベストです。

セクションの設定 → 詳細 → 位置

Diviのセクションの設定

ここで設定します。
『初期設定』と書いてある部分をクリックします。

Fixedを選ぶ

位置のオプションからFixedを選ぶ
位置のオプションからFixedを選ぶ

このようにFixedを選びます。
これで保存するだけでこのセクションはスティッキーになります。
試してみましょう。

セクションを使いましたが、モジュールでも行でもできます

固定する位置を変える

スティッキーヘッダーの位置を真ん中に持ってくる

固定したエレメントの位置を変えることができます。
Locationと書いてある部分に、9つの四角いボックスがあり、どれかクリックしてみましょう。
上の画像は真ん中をクリックした場合です。
セクションの位置が真ん中にきていますね。

Vertical OffsetとHorizontal Offsetで自由に位置を変える

画像モジュールを自由に移動させる
画像モジュールの位置を自由に変えている

このように、Vertical OffsetとHorizontal Offsetを使うことによって、更に自由に位置を変えることができます。

ドラッグ&ドロップで位置を変える

画像をドラッグ&ドロップで位置を移動

このように移動させたいエレメントの上にいくと、右上にハンドルが出てきてそこを掴むことにより自由にドラッグ&ドロップで移動させることが出来るんです。
これは自動でVertical OffsetとHorizontal Offsetと変換してくれます。

Zインデックスでどちらが上にくるか決める

Zインデックスでどのエレメントが上に来るのか決定する
Zインデックスを動かすことによって、画像を上に持ってくる

自由に移動させると二つ以上のエレメント(モジュール、セクションや行)が重なってしまうこともありますね。
どうしたら特定のエレメントを上に持ってこれるのか?
これを解決してくれるのがZインデックスです。
上の画像のように、Zインデックスの値が大きいものが上にきます

是非試してみましょう!

スクロールの途中からエレメントを画面に固定する方法

では次にスクロールの途中から画面にエレメントを貼り付ける方法を紹介します。

スクロールの途中から追てくるってどう言うこと?

このようにスクロールの途中からモジュールを画面に貼り付けることが可能です。
モジュールだけでなく、セクションも行も列も貼り付けることが可能です。

Scroll Effects → Sticky Positionで設定

Diviのエレメントを画面に固定する際は、Scroll Effects→Sticky Positionを使う

画面上の要素を固定させたい場合は、Scroll Effects → Sticky Positionにいき、『Sticky Position』を設定します。
この『Sticky Position』には四つのオプションがあります。

  • Do Not Stick (固定しない)
  • Stick to Top (上に固定)
  • Stick to Bottom (下に固定)
  • Stick to Top and Bottom (上と下に固定)

これは『上と下に固定』以外は、意味がわかると思います。
『上と下に固定』はやって見ていただければわかると思うのですが、スクロールアップする時は下に固定され、スクロールダウンする時に上に固定されます。

Sticky Offset

画面に張り付く場所を上または下からずらすことができる

このように、通常画面の一番上や下に貼り付く要素を、少しずらして固定することがこのSticky Offsetのメニューから可能です。

Sticky Bottom/Top Limit

Diviで要素を固定する範囲の制限

このメニューはこの固定が及ぶ範囲を示しています。
例えば何もしなければBody Area、つまり画面全体なので、上に固定されたメニューはどこへ行こうとついてきます。
ですがこれをセクションにすると、固定はそのセクションのみで効果があります。
そのセクションを出るその要素は追いてきません。

色々と試して見てください。かっこいいエフェクトが作れますよ。

まとめ

どちらの方法でも画面に要素を固定することができます。
ですがそれぞれ特徴があるのがわかったと思います。
一概にどちらがいいとは言えませんが、用途に合わせて使い分けましょう。

Diviで出来ることをもっと知りたい方は、Diviの全てをまとめたページDivi完全マニュアルをチェックしてみてください!

コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』

Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通