Diviページ要素をスティッキーにする方法

Diviページ要素をスティッキー（または固定）にする方法を知ることは、Webデザイナーがさまざまな方法で使用できる便利なスキルの1つです。 「スティッキー」という用語に慣れていない場合は、ユーザーがページを下にスクロールしても「固定」されたままのWebページ上の要素を指します。 スティッキー要素の一般的な例は、固定ナビゲーションメニューです。 Diviには、デフォルトで使用可能な固定（またはスティッキー）ナビゲーション機能があります。 そのため、ユーザーがページを下にスクロールしても、ユーザーがスクロールしても、メニューの固定バージョンがページの上部に表示されたままになります。 ただし、スティッキー要素はほぼすべての用途に使用でき、特定のページでの目的の行動を促すフレーズに注意を喚起するのに最適な方法です。

このチュートリアルでは、ScrollのSticky Menu（またはAnything！）と呼ばれるプラグインを使用して、ページ上の要素をスティッキーにする簡単な方法を紹介します。 プラグインの設定を構成するのに少し時間がかかります。 次に、必要なのは、カスタムCSSIDを要素に追加することだけです。 とても簡単です。

入りましょう！

このチュートリアルに必要なもの

このチュートリアルでは、次のものが必要になります。

• ディビのテーマ
• ScrollプラグインのStickyMenu（またはAnything！）
• 会計士のブログページレイアウト（Divi Builder内から利用可能）

Diviページ要素をスティッキーにする方法

私たちのYoutubeチャンネルを購読する

プラグイン設定の構成

ScrollプラグインのStickyMenu（またはAnything！）をインストールし、Diviテーマでアクティブ化したら、WordPressダッシュボードに移動し、[設定]> [Sticky Menu（またはAnything！）]に移動します。

[基本設定]タブで、オプションを次のように更新します。

まず、スティッキー要素に一意の識別子を追加する必要があります。 これは、CSSIDまたはクラスにすることができます。 その後、この識別子をDiviの要素に追加します。 覚えやすくするために、CSSID「#sticky」を追加します。

スティッキー要素：#sticky

次に、ページの上部とスティッキー要素の間のスペースのピクセル値を追加する必要があります。 Diviの固定ナビゲーションバーの高さはデフォルトで54pxなので、このオプションには少なくとも54pxを追加して、スティッキー要素が固定ナビゲーションと重ならないようにします。

ページ上部とスティッキー要素の間のスペース：54ピクセル

モバイルでスティッキー要素を無効にすることもお勧めします。 これを行うには、画面が980pxより小さい場合に要素を固定しないように、プラグインを構成する必要があります。

画面が980ピクセルよりも小さい場合は、要素を貼り付けないでください

設定を保存してから、[詳細設定]タブに移動し、以下を更新します。

z-indexオプションの場合、特にスクロールで他の要素と重なる要素を計画している場合は、要素がページ上の他のすべての要素の上にスタックされていることを確認する必要があります。 これを確実に行うには、z-indexを99998に設定します。

Zインデックス：99998

Diviで要素がどのように順序付けられているかを理解するために、セクションのz-indexは2、列のz-indexは9、ヘッダー/ナビゲーションバーのz-indexは99999です。スティッキー要素をヘッダーナビゲーションのz-indexより1つ小さい値にする必要があります。 これにより、スティッキー要素がページ上のナビゲーション以外のすべての上に配置されるようになります。 これは、要素を停止してページを上に押し上げたいときに便利です。これにより、スクロール時に粘着性の要素がナビゲーションの上に配置されなくなります（乱雑で壊れているように見えます）。

次に、「プッシュアップ」要素識別子を追加できます。 これは、粘着性のある要素のストッパーと考えることができます。 これは通常、フッター要素です。 基本的に、これは、ページを下にスクロールしたときにスティッキー要素を停止する要素を識別し、スティッキー要素をページの残りの部分と一緒に押し上げることができるようにします。 この例では、CSSID「#stop」で識別子を設定します。

腕立て伏せ要素：#stop

設定を保存する。

これで、粘着性のある要素を作成するために必要なパワーが装備されました。

Diviページ要素をスティッキーにする

Divi要素をスティッキーにする方法を示すために、Accountant LayoutPackのDiviのAccountantブログページを使用します。 開始するには、新しいページを作成し、ページにタイトルを付けて、VisualBuilderを展開します。 次に、「既成のレイアウトを選択」オプションを選択します。 ライブラリからの読み込みポップアップから、Accountant Layout Packを選択し、ブログページを選択します。

このページには、専門セクションの右側のサイドバーに電子メールサブスクリプションオプチンフォームがあります。 このフォームにもっと注意を引くために、ユーザーがページを下にスクロールすると、フォームが粘着性になる可能性があります。 次に、要素が重ならないように、ページの次のセクションに到達するたびに要素を停止（または押し上げる）することができます。

柱を粘着性にする方法

ただし、この時点で、どの特定の要素をスティッキーにするかを決定する必要があります。 Email Optionモジュールをスティッキーにすることもできますが、フォームのすぐ下にあるSocial Media Followモジュールは考慮されません。これも、スティッキーにします。 また、これらのモジュールは両方とも同じ位置でスティッキーになり、オーバーラップが発生するため、両方のモジュールに同じ識別子を付けることができます。 これを行う最良の方法は、列全体（列2）を粘着性にすることです。

列2をスティッキーにするには、ターゲットにする列を含む行の行設定を開きます。 次に、[詳細設定]タブで、CSSID「スティッキー」を追加します。 これは、プラグイン設定で追加したスティッキー要素の一意の識別子に対応します。

CSS ID：スティッキー

（注：ここでは、IDの前にハッシュタグ（またはポンド）記号を付けないでください。また、CSSクラスではなくCSS IDに追加してください）

設定を保存し、ページのライブバージョンをプレビューします。 下にスクロールすると、列2（両方のモジュールを含む）がウィンドウの上部から54pxになると粘着性になり、スクロールを続けるとその位置に留まります。

セクションでスティッキー要素を停止する

ご覧のとおり、要素は引き続きスティッキーのままであるため、以下の他のセクションのコンテンツとオーバーラップします。 これを防ぐために、プラグイン設定で追加した「プッシュアップ」識別子（#stop）を使用できます。

以下のセクションのスティッキー要素を停止するには、セクション設定を開き、CSSID「stop」を追加する必要があります。

CSS ID：停止

次に、ページのライブバージョンをプレビューします。 スティッキー要素が特定したセクションでどのように停止するかに注目してください。

かなりかっこいいですよね？

モジュールをスティッキーにする方法

単一のモジュールをスティッキーにするには、Diviで調整を行って、要素が正しいzインデックスを持ち、スクロール時にページ全体で他の要素の上に配置されるようにする必要があります。 前に述べたように、Diviはすべてのセクションに2のz-indexを割り当てます。 そして、プラグインは99998のz-indexをsticky要素に適用します。 ただし、モジュールはその親要素（セクション）の上に順序付け（またはインデックス付け）できないため、モジュールはページ上の他のモジュールの後ろに配置されたままになります。 これを修正するには、スティッキーモジュールを保持しているセクションに手動で99998のz-indexを指定する必要があります。

これを説明するために、前に使用したのと同じAccountantBlogページレイアウトを使用します。 CSS IDをモジュールに追加する前に、まず、列2に設定したCSS ID（スティッキー）を取り出す必要があります。次に、その下のセクションに設定したCSS ID（停止）を取り出します。 その後、ソーシャルメディアフォローモジュールの設定を開き、CSSID「スティッキー」をモジュールに追加します。

ライブページを表示すると、下のセクションでスクロールするときに他のモジュールと重なると、スティッキー要素が非表示になります。

これを修正するには、ソーシャルメディアフォローモジュールのスティッキー要素を含むセクションのセクション設定を開きます。 次に、次のカスタムCSSをメイン要素に追加します。

z-index: 99998;

次に、ライブページを確認します。 ソーシャルメディアアイコンがページの上部（上から54px）に固定され、固定ナビゲーションのすぐ下に表示され、スクロールしても他のモジュールの上にとどまることに注意してください。

セクションをスティッキーにする

セクション全体をスティッキーにするには、選択したセクションにCSSID「スティッキー」を追加するのと同じプロセスに従います。 プラグインが自動的に更新するため、カスタムcssを使用してz-indexを更新する必要はありません。

ホバー効果により、スティッキー要素がグリッチする可能性があります

ページ全体またはスティッキー要素でホバー効果をアクティブにしている場合は、グリッチが発生する可能性があります。 これが発生した場合、スティッキー要素のホバー効果を無効にする必要がある場合があります。

ページごとに1つのスティッキー要素のみ

プラグインはページごとに1つのスティッキー要素のみを許可するため、複数のスティッキー要素を追加する場合は、より高度なソリューション（またはこれをサポートする別のプラグイン）が必要になります。

最終的な考え

この記事が、Diviページ要素をスティッキーにするためのさわやかでシンプルな方法を提供するのに役立つことを願っています。 スティッキーなサブメニュー、スティッキーなCTA、スティッキーなプロモーションオファーなど、考えられるあらゆるものを作成するために使用します。 可能性を探るのを楽しんでください！

以下のコメントであなたからの連絡を楽しみにしています。

乾杯！