Diviの任意のページ要素にスティッキー効果を与える方法

ユーザーがページを下にスクロールしている間、所定の位置にとどまるWebページのこれらの部分は、スティッキー（または固定）コンポーネントです。 このような特性には、幅広い用途があります。 プライマリナビゲーションメニューは、人と一緒に移動する場合があります。 または、オプトインメールフォームがページの左側に沿って移動します。 ユーザーの全体的なエクスペリエンスは、シンプルなデザイン要素によって強化される場合があります。 スティッキー設定用のDiviの組み込みオプションを使用すると、この効果をサイトにすばやく簡単に追加できます。

このガイドでは、 Diviの組み込みのスティッキーオプションを使用して、ページ上の要素を「スティッキー」（修正済み）にする方法を説明します。これにより、プラグインやコードについて気にする必要がなくなります。 それについてのすべては簡単で、簡単で、そして速いです。 それで、それ以上の苦労なしに、ここに行きます。

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

ページ要素をスティッキーにするために、ページを作成して開き、Diviビジュアルビルダーで編集します。 今日のチュートリアルでは、事前に作成されたレイアウトを使用しますが、この効果を適用するために任意の要素で作業できます。

次のステップは、利用可能なオプションからDiviスティッキー要素を選択することです。 Webサイトでは何でもかまいませんが、今日は単一のモジュールに焦点を当てます。 たとえば、「オンラインショップ」ボタンモジュールは一般的なUI要素であるため、選択してみましょう。

その後、設定アイコンをクリックしてモジュールのオプションにアクセスし、[詳細設定]タブに切り替えます。 ページの一番下までスクロールし、その後、設定アイコンをクリックしてモジュールのオプションにアクセスし、[詳細設定]タブに切り替えます。 ページの一番下までスクロールして一番上にスクロールEffects.Âスティックをクリックし、下へÂスティックとスティックトップとボトムÂは-あなたの必要性に応じて選びます。 [上に固定]を選択すると、下にスクロールしても要素は所定の位置に留まります。 （ビューポートのその部分だけ下に移動したと考えてください。）ユーザーがカーソルを置き去りにするのではなく上に移動しても、粘着性が残ります。

とりあえず、 Stick to the Top andBottomというコンボオプションを選択してください。 これですべてです。 これで要素がスタックします。 要素のスクロールを、指定されたページ領域またはビューポートの境界から特定の距離のみに制限できるようになりました。

Divi要素をどのように固定するかを決定したら、ユーザーがスクロールを開始したときに、上部または下部、あるいはその両方からどれだけ離れているかを指定できます。 つまり、0pxを選択する場合、コンポーネントはビューポートの端にのみ表示されます。 55pxを選択すると、ページがスクロールした後もビューポートの端からの距離は一定に保たれます。 ビューポートの利点がそれほど遠くにある場合、ビューポートはスクロールを開始します。

上部/下部のスティッキードロップダウン制限を使用すると、永続的にスタックする場所を選択できます。 本文領域オプションを有効にして、要素が親コンテナ（列、行、またはセクション）内にとどまるかどうかを選択するか、無効にすることでページ全体にとどまることができます。 いずれにせよ、それがどのように構成されるかはあなた次第です。 ユーザーがページを下にスクロールすると、要素は一番下に到達するまでその場所に留まりますが、ユーザーがカーソルをページの上に移動すると要素は消えます。

多くの粘着性のある要素を使用している場合は、それらが離れていることを確認する必要があります。 必要に応じて、[周囲のスティッキー要素からのオフセット]をオンにして、他のスティック要素に対して上記で入力したオフセット設定を使用します。 これを行わないと、スクロール中にスティッキーアイテムが重なる可能性があります。 それは誰も望まないことです。

[デフォルトの変換]および[スティッキースタイル]オプションで遊ぶのはとても楽しいです。[変換効果のスクロール]を使用すると、要素のトランジションとアニメーションをカスタマイズできます。 現在それらをフォローしているコンポーネントにさらに注意を引くには、要素をフェードまたは回転させます。

このオプションを使用して、粘着性のある要素をまったく異なるように見せることもできます。 [デザイン]タブの画鋲アイコンをクリックして、スティッキースタイルをアクティブにします。 このアイコンは、高度なスクロール効果でスティッキネスをすでに有効にしている場合にのみ表示されることに注意してください。

その後、他のセカンダリDiviコンポーネントと同じように、スティッキー要素をカスタマイズできます。 スマートフォンを使用している場合は、デスクトップやタブレットではなく、画鋲タブをクリックします。 スティッキー要素は、Diviの背景、色、サイズのオプションを使用して、静的な要素とは異なり、簡単にユニークに見せることができます。

また、セクションをスティッキーにすると、行、列、モジュールなど、セクションのすべての子要素に画鋲アイコンが表示されることにも注意してください。 スクロールスタイルは個別に適用できますが、親からsticky属性を継承します。

Zインデックスの調整

デザイナーのほとんどは、ページの上部にスティッキー要素を保持することを好みます。 そこでZ-indexが登場し、必要に応じてその値を設定しました。 Z-indexオプションは、[詳細設定]タブの[位置設定]で使用できます。 この設定は、要素の深さを示します。 したがって、Zインデックス値が高い要素は、他の要素と比較してより前面に表示されます。

スティッキー要素をページの上位に表示するには、スティッキー要素が含まれている行またはセクションのZインデックスを低くする必要があります。

ボタンと行のZインデックス値を他のモジュールよりも高く設定しているため、ページ全体の上部に表示されます。

最後の言葉

Diviのスティッキー要素オプションを使用して、情報が流れるときにモジュール、行、列、またはセクションをどこにでもアタッチできます。 召喚状（CTA）、サブメニュー、プロモーションオファー、その他のいずれであっても、 Diviはいくつかの強力なオプションを提供しています。 今、あなたがそれらを行動に移すのを見るのは楽しいでしょう！ それが今日のすべてです。 このチュートリアルがあなたにとって有益であることを願っています。 Diviスティッキーオプションに関するブログやその他の記事を友達と共有し、スティッキーオプションを使用して見事なデザインを作成するのを手伝ってください。