Diviで上にスクロールしながらグローバルヘッダーを表示し、下にスクロールしながら非表示にする方法

公開: 2019-12-11

グローバルヘッダーを作成するときは、考慮しなければならないことがたくさんあります。ヘッダーに配置する要素は、訪問者が簡単にナビゲートできるようにする必要があります。人々がナビゲートするのに費やす時間を減らすために、多くのWebデザイナーは、訪問者が他のページや投稿にすぐにアクセスできるように、固定のトップヘッダーを選択します。これは非常に便利ですが、固定ヘッダーを作成すると、訪問者のビューポートの高さの大部分が占められるため、一度に表示されるコンテンツが少なくなります。あなたがその犠牲を払う気がないのなら、あなたがそうする必要がないことを知ってください。訪問者が上にスクロールしているときにグローバルヘッダーを表示し、下にスクロールしているときに非表示にすることで、固定ヘッダーの利点を得ることができます。本日は、Diviのテーマビルダーを使用してグローバルヘッダーを表示および非表示にする方法について説明します。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

グローバルヘッダーを明らかにする

モバイル

グローバルヘッダーを明らかにする

グローバルヘッダーテンプレートを無料でダウンロード

無料のグローバルヘッダーテンプレートを入手するには、まず下のボタンを使用してダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1. Diviテーマビルダーに移動し、新しいテンプレートを追加します

Diviテーマビルダーに移動します

まず、Diviテーマビルダーに移動します。

グローバルヘッダーを明らかにする

グローバルヘッダーの作成を開始します

そこで、[グローバルヘッダーの追加]をクリックし、[グローバルヘッダーの作成]を選択します。

グローバルヘッダーを明らかにする

2.グローバルヘッダーの作成を開始します

セクション設定

背景色

テンプレートエディタ内に、セクションがあります。そのセクションを開き、背景色を変更します。

背景色：#ffffff

グローバルヘッダーを明らかにする

サイジング

[デザイン]タブに移動し、次にセクションに100％の幅を割り当てます。

幅：100％

グローバルヘッダーを明らかにする

間隔

カスタムの上部と下部のパディングも追加します。

トップパディング：2vw
ボトムパディング：2vw

グローバルヘッダーを明らかにする

ボックスシャドウ

セクションにも微妙なボックスシャドウを適用します。

ボックスシャドウブラー強度：50px
影の色：rgba（0,0,0,0.08）

グローバルヘッダーを明らかにする

CSS ID

このチュートリアルの後半で、スクロール効果を実現するためのカスタムコードが必要になります。そのための準備として、CSSIDをセクションに追加します。

CSS ID：global-header-section

グローバルヘッダーを明らかにする

主な要素

また、セクションのメイン要素に2行のCSSコードを追加して、セクションを固定ヘッドに変換します。

position: fixed;
top: 0;

グローバルヘッダーを明らかにする

Zインデックス

ここで、セクションがすべてのページまたは投稿コンテンツの上部に表示されるようにするために、表示設定のzインデックスも増やします。

Zインデックス：99999

グローバルヘッダーを明らかにする

新しい行を追加

カラム構造

すべてのセクション設定が完了したら、次の列構造を使用してセクションに新しい行を追加して続行します。

グローバルヘッダーを明らかにする

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。

カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
幅：100％
最大幅：100％

グローバルヘッダーを明らかにする

間隔

デフォルトの上下のパディングもすべて削除します。

トップパディング：0px
ボトムパディング：0px

グローバルヘッダーを明らかにする

主な要素

列のコンテンツを中央に配置し、行のメイン要素に2行のCSSコードを追加することで、小さい画面サイズで列を並べて表示できるようにします。

display: flex;
align-items: center;

グローバルヘッダーを明らかにする

ソーシャルメディアフォローモジュールを列2に追加

ソーシャルネットワークを追加する

1列目のソーシャルメディアフォローモジュールから始めて、モジュールを追加します。表示するソーシャルネットワークを追加します。

グローバルヘッダーを明らかにする

個々のソーシャルネットワークスタイルをリセットする

個々のレベルで各ソーシャルネットワークのスタイルをリセットすることによって続行します。

グローバルヘッダーを明らかにする

個別のソーシャルネットワーク間隔を追加する

各ソーシャルネットワークの設定も個別に開き、間隔の設定に下部のパディングを追加する必要があります。

ボトムパディング：0.5vw

グローバルヘッダーを明らかにする

配置

各ソーシャルネットワークに個別に下部のパディングを追加したら、一般的なモジュール設定に戻ります。 [デザイン]タブに移動し、モジュールの配置を変更します。

モジュールの配置：中央

グローバルヘッダーを明らかにする

デフォルトのアイコン設定

アイコン設定でもアイコンの色を変更してください。

アイコンの色：＃000000

グローバルヘッダーを明らかにする

ホバーアイコンの設定

そして、ホバー時にアイコンの色を変更します。

アイコンの色：＃c2ab92

グローバルヘッダーを明らかにする

国境

境界線設定に下の境界線を追加して、モジュールの設定を完了します。

下の境界線の幅：1px
下の境界線の色：＃000000

グローバルヘッダーを明らかにする

メニューモジュールを列2に追加

メニューを選択

次のコラムへ！メニューモジュールを追加し、お好みのメニューを選択します。

グローバルヘッダーを明らかにする

ロゴをアップロード

次に、モジュールにロゴをアップロードします。

グローバルヘッダーを明らかにする

背景色を削除する

そして、背景色を削除します。

グローバルヘッダーを明らかにする

レイアウト

次に、[デザイン]タブに移動し、次の設定がレイアウトに適用されることを確認します。

スタイル：中央揃え
ドロップダウンメニューの方向：下向き

グローバルヘッダーを明らかにする

デフォルトのメニューテキスト

次のようにメニューテキスト設定を変更して続行します。

アクティブリンクの色：＃c2ab92
メニューフォント：鵜ガラモンド
テキストの色：＃000000
メニューテキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）

グローバルヘッダーを明らかにする

メニューテキストにカーソルを合わせる

ホバー時にメニューテキストを変更します。

メニューテキストの色：＃c2ab92

グローバルヘッダーを明らかにする

ドロップダウンメニュー

次に、ドロップダウンメニュー設定でドロップダウンメニューの線の色を変更します。

ドロップダウンメニューの線の色：＃000000

グローバルヘッダーを明らかにする

アイコン

アイコン設定でもハンバーガーメニューのアイコンの色を変更します。

ハンバーガーメニューアイコンの色：＃000000

グローバルヘッダーを明らかにする

サイジング

サイズ設定でさまざまな画面サイズにわたってロゴの最大幅を変更して続行します。

ロゴの最大幅：5vw（デスクトップ）、10vw（タブレット）、13vw（電話）

グローバルヘッダーを明らかにする

メニューリンクCSS

そして、[詳細設定]タブのモジュールのメニューリンクに2行のCSSコードを追加して、モジュールの設定を完了します。

padding-bottom: 1vw;
border-bottom: 1px solid #000;

グローバルヘッダーを明らかにする

列3にテキストモジュールを追加

コピーを追加

最後のモジュールへ！そこで必要なモジュールはテキストモジュールだけです。

グローバルヘッダーを明らかにする

リンクを追加

このモジュールはCTAとして機能します。選択したリンクを追加します。

モジュールリンクURL：＃

グローバルヘッダーを明らかにする

デフォルトのテキスト設定

モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

テキストフォント：鵜ガラモンド
テキストの色：＃000000
テキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）

グローバルヘッダーを明らかにする

テキスト設定にカーソルを合わせる

ホバー時にテキストの色を変更します。

テキストの色：＃c2ab92

グローバルヘッダーを明らかにする

サイジング

さまざまな画面サイズでモジュールのサイズ設定を変更して続行します。

幅：12vw（デスクトップ）、18vw（タブレット）、22vw（電話）
モジュールの配置：中央

グローバルヘッダーを明らかにする

間隔

そして、間隔設定にいくつかの下部パディングを追加します。

ボトムパディング：0.5vw

グローバルヘッダーを明らかにする

国境

下の境界線を追加して、モジュールの設定を完了します。

下の境界線の幅：1px
下の境界線の色：＃000000

グローバルヘッダーを明らかにする

列2にコードモジュールを追加する

JQueryとCSSコードを挿入する

行内のすべてのモジュールのスタイルを設定したら、表示/非表示効果を実現します。これを行うには、列2に配置するコードモジュールにカスタムコードを追加する必要があります。このコードは、ヘッダーの設計方法や使用するモジュールに関係なく、追加するすべてのセクションで機能します。セクションにCSSIDを追加したことを確認してください。 以下の印刷画面に示すように、JQueryコードをスクリプトタグの間に配置し、CSSコードをスタイルタグの間に配置します。

jQuery(function($){
  
var topPosition = 0;


$(window).scroll(function() {

    var scrollMovement = $(window).scrollTop();
  
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
  
});

#main-content{
margin-top: 7vw;
}

.hide-header {
opacity: 0;
margin-top: -200px !important;
}

.show-header {
opacity: 1;
margin-top: 0px !important;
}

#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

グローバルヘッダーを明らかにする

3.ビルダーの変更を保存して結果を表示する

グローバルヘッダーが完成したら、すべての変更を保存して、Webサイトで結果を表示します。

グローバルヘッダーを明らかにする

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

グローバルヘッダーを明らかにする

モバイル

グローバルヘッダーを明らかにする

最終的な考え

この投稿では、上にスクロールするとグローバルヘッダーを表示し、下にスクロールすると非表示にする方法を説明しました。これは、ビューポートの高さの一部を占めることなく、訪問者が簡単にナビゲートできるようにするための一般的で効果的な方法です。 JSONファイルも無料でダウンロードできました！ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。

Diviで上にスクロールしながらグローバルヘッダーを表示し、下にスクロールしながら非表示にする方法

プレビュー

デスクトップ

モバイル

グローバルヘッダーテンプレートを無料でダウンロード

無料でダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1. Diviテーマビルダーに移動し、新しいテンプレートを追加します

Diviテーマビルダーに移動します

グローバルヘッダーの作成を開始します

2.グローバルヘッダーの作成を開始します

セクション設定

背景色

サイジング

間隔

ボックスシャドウ

CSS ID

主な要素

Zインデックス

新しい行を追加

カラム構造

サイジング

間隔

主な要素

ソーシャルメディアフォローモジュールを列2に追加

ソーシャルネットワークを追加する

個々のソーシャルネットワークスタイルをリセットする

個別のソーシャルネットワーク間隔を追加する

配置

デフォルトのアイコン設定

ホバーアイコンの設定

国境

メニューモジュールを列2に追加

メニューを選択

ロゴをアップロード

背景色を削除する

レイアウト

デフォルトのメニューテキスト

メニューテキストにカーソルを合わせる

ドロップダウンメニュー

アイコン

サイジング

メニューリンクCSS

列3にテキストモジュールを追加

コピーを追加

リンクを追加

デフォルトのテキスト設定

テキスト設定にカーソルを合わせる

サイジング

間隔

国境

列2にコードモジュールを追加する

JQueryとCSSコードを挿入する

3.ビルダーの変更を保存して結果を表示する

プレビュー

デスクトップ

モバイル

最終的な考え

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。