Diviナビゲーションを下から開始し、スクロール時に上に固定する方法

公開: 2017-07-17

今日のDiviチュートリアルでは、スクロール時およびフルスクリーンの高さを超えた後にWebサイトで固定ナビゲーションを作成する方法を段階的に説明します。この投稿の手順に従って固定ナビゲーションを再作成すると、ナビゲーションがメインメニューと一般的なWebサイトに優れた相互作用効果をもたらすことがわかります。

画面上に通常の垂直ナビゲーションを作成することから始めます。このナビゲーションは、ページの上部ではなく、画面の下部にプッシュされます。スクロールした後、画面のメニューの高さを超えると、メニューの位置が変わり、ページの上部に配置されることがわかります。ナビゲーションが修正されると、ページの残りの部分全体で固定されたままになります。ただし、ヒーローセクションにスクロールして戻ると、ナビゲーションは再び正常に動作し、ヒーローセクションの下部に配置されます。

ページは画面の下部にあるメニューを「ピックアップ」し、探している高度な効果を与えると言うことができます。私たちが達成しようとしている結果を視覚化するのに役立つように、最終結果を見てみましょう。

ヒーローセクション：フルスクリーンモードの全幅ヘッダーモジュール

この効果をWebサイトに使用する場合は、考慮すべきことが1つあります。フルスクリーンモードのヘッダーモジュールが必要です。理論的には、これを他のモジュールやセクションにも適用できますが、メニューがそのセクションの下部に表示されるようにするには、いくつかの変更を加える必要があります。 Diviが提供するフルスクリーンオプションは、ヒーローセクションが画面全体に表示されるようにします（画面の小節が何であれ）。そのため、この効果をメニューに適用する場合は、このオプションを使用することをお勧めします。

この効果を追加するページを開くか作成することから始めます。次に、全幅ヘッダーを開くか、ヘッダーを作成して[デザイン]タブに移動します。 [デザイン]タブで最初に目にするのは、[レイアウト]サブカテゴリです。先に進み、そのサブカテゴリでフルスクリーンモードを有効にします。

スクロール時の固定ナビゲーションの作成

ウェブサイトに効果を追加するには、いくつかのCSSコード行といくつかのjQueryコード行の両方を利用する必要があります。使用するCSSコードは、ナビゲーションを画面の下部に配置し、jQueryコードがアクティブ化される前に通常のフッターのように動作するようにします。その後、jQueryコード行がカスタムCSSコードを引き継ぎ、Webサイト上の位置に応じてナビゲーションを動作させます。

必要なCSSコードを追加する

まず、必要なCSSコードをWebサイトに追加します。一般に、これを行うには3つの方法があります。最初の2つの方法では、コードをWebサイト全体に適用します。 3番目の方法では、1ページのみで機能します。

テーマカスタマイザーを介してCSSコードを追加する

最初に紹介する方法では、テーマカスタマイザーを使用してコードを追加できます。これはコードを追加する方法ですが、それほど頻繁には使用されませんが、いくつかの特典があります。そのうちの1つは、コードを追加するとすぐに、変更がリアルタイムで行われることに気付くということです。

CSSコードを追加するには、WordPressダッシュボードを開き、[外観]> [カスタマイズ]に移動します>タブを下にスクロールして[追加のCSS]タブを開きます>次のCSSコード行を追加します。

#main-header {
position: absolute;
top: auto;
bottom: 0;
}

テーマオプションを使用してCSSコードを追加する

使用する最も一般的なオプションであるもう1つのオプションは、DiviWebサイトのテーマオプションにCSSコードを追加することです。コードを追加すると、ウェブサイト全体に適用されます。 1ページだけに効果を追加する可能性を探している場合は、特に1ページにコードを追加できる次の可能性に進んでください。

テーマオプションにコードを追加するには; WordPressダッシュボードに移動> Divi>テーマオプション> [全般]タブを下にスクロールして、次のコードを[カスタムCSS]フィールドに貼り付けます。

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

1つのページにのみCSSコードを追加する

この固定ナビゲーションを1つのページにのみ適用し、Webサイトの残りの部分には適用しない場合、この可能性は興味深いかもしれません。たとえば、ホームページで全幅ヘッダーのみを使用している場合は、この方法を使用することをお勧めします。

スクロール時に固定ナビゲーションを追加するページを開きます。次に、ビルダーの右隅に次の記号が表示されます。

それをクリックすると、ページ全体を変更できる画面が表示されます。 [カスタムCSS]ボックスに次のコードを追加して、特にそのページに適用できるようにします。

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

必要なjQueryコードを追加する

次のステップは、WordPressWebサイトにjQueryコードを追加することです。このコードは、スクロールした瞬間から機能し始めます。 jQueryコードは2つの方法で追加できます。テーマオプションまたはコードモジュールを介して。コードを1ページにのみ追加する場合は、この投稿でCSSコードについて説明した3番目の可能性と組み合わせてコードモジュールを使用できます。

テーマオプションを介してjQueryコードを追加する

Webサイトのすべてのページにコードを適用するには、テーマオプションにコードを追加します。 WordPressダッシュボードに移動> Diviに移動>テーマオプションに進む> [統合]タブを開き、次のコードを[ブログの<head>]フィールドに貼り付けます。

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

コードモジュールを介してjQueryコードを追加する

特に1つのページにコードを追加したい場合は、コードモジュールを使用して追加できます。 CSSコードを追加した前の部分では、最後のオプションを選択している必要があります。

そのページに戻り、ページの上部に標準セクションを追加します。その標準セクション内に、コードモジュールを追加します。このセクションは実際には好きな場所に配置できますが、すばやく見つけたい場合は、ページの上部に配置することをお勧めします。次に、次のコードをコピーして、コードモジュールのコンテンツボックスに貼り付けます。

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

以上です！これでコードが機能し、メニューが変換され、Webサイトがもう少しインタラクティブになります。

最終的な考え

この投稿では、スクロール時に固定ナビゲーションを作成する方法を紹介しました。トリックを実行する必要があるいくつかのCSSコード行といくつかのjQueryコード行を提供しました。この投稿を段階的に実行すると、最終的な結果を得ることができるはずです。今後の投稿について質問や提案がある場合。下のコメント欄にコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

DenisXize / shutterstock.comによる注目の画像