スティッキー Web サイトヘッダーの作成方法

公開: 2023-02-12

ユーザーがスクロールしても固定される Web サイトのヘッダーは、非常に人気のあるデザイン要素になっています。ユーザーは、別のページやオプションを選択するたびに上にスクロールする必要なく、ナビゲーションに簡単にアクセスできます。

この機能を持つ要素は、多くの場合「スティッキー」と呼ばれます。これは、ユーザーが Web サイトを移動しても表示されたままになるためです。ユーザーが最初に Web サイトにアクセスしたとき、要素は開始位置にありますが、スティッキーヘッダーは同じ場所に残ります。

ナビゲーションは Web サイトの最も重要な要素の 1 つであるため、このアプローチを採用すると、ナビゲーションがよりアクセスしやすくなります。固定されたナビゲーションを使用すると、ユーザーが Web サイトのコンテンツを移動する際に簡単なフローが可能になります。これは非常に重要です。

スティッキーナビゲーション要素は、人々が Web サイトを移動する際に、簡単なユーザーフローを作成するのに役立ちます。

下 3 分の 1 にソースコードが表示された Web ページのスクリーンショット

1.べたつく原因は?

1.1。注: ライブサイトでこれを試さないでください。

1.2. ナビゲーションを 1 か所に固定するにはどうすればよいですか?

1.3。ページ本文の調整

2.スティッキーヘッダーをスクイーズにする

2.1. AnimatedHeader スクリプトを使用したスクイーズナビゲーション

3. CSS Sticky Positioning オプション

3.1. 使用位置: スティッキー

3.2. これらのスティッキーオーバーフローの状況に注意してください

4.ライブサイトでこれを試さないでください

粘着性の原因は何ですか?

位置を固定することは、ナビゲーションを所定の位置に固定するための重要な要素です。この固定位置要素は、ビューポートまたはブラウザーウィンドウ自体に対して相対的に配置されます。サイトがスクロールされてもビューポートは変わらないため、この固定配置要素は、ページがスクロールされても同じ場所にとどまります。

注: ライブサイトでこれを試さないでください。

覚えておいてください: 何も壊れないように、実際のサイトでコードを直接変更しないでください。無料のローカル開発アプリ Local は、このチュートリアルを安全に実行できるテスト環境をセットアップするのに役立ちます。

ナビゲーションを 1 か所に固定するにはどうすればよいですか?

ナビゲーションを固定化するのは、これほど簡単なことではありません。それは CSS スタイルで行われるだけです。基本的には次のようになります。

 [CSS]

.navbar-fixed-top {

位置: 固定;

右: 0;

左: 0;

Z インデックス: 999;

}

[/css]

ページの長さに関係なく、または何度上下にスクロールしても、ナビゲーションはページの上部に「スタック」します。ナビゲーションの配置を作成する.navbar-fixed-topというクラスがナビゲーションに追加されました。このクラスを nav タグに追加しました。位置は固定に設定され、左右の配置を追加することで、配置が正しくなり、ページの全幅を占めるようになります。

このクラスが適用されるたびに、要素の固定位置が作成されることに注意してください。ほとんどの場合、このクラスは 1 回だけ適用されます。そうしないと、複数のページ要素が同じ場所で同じように動作し、ごちゃごちゃになります。

もう 1 つの重要な考慮事項は、z インデックスです。ナビゲーションを常に表示したいので、他の要素と重ならないようにする必要があります。 z-indexを参照するとき、特定の要素のスタック順序を設定する CSS プロパティについて話しています。スタック順序が大きい要素は、常にスタック順序が小さい別の要素の前にあります。 999 という値は大きな数字であり、ナビゲーションの安全な賭けになります。

ページ本文の調整

ナビゲーションが固定位置にあるため、上部のコンテンツの一部がカバーされます。これには簡単な修正方法があります。本文の上部にパディングを追加すると、ページが押し下げられるため、ユーザーがページに到着したときに上部のコンテンツがヘッダーで覆われなくなります。
CSS ファイルの本文にパディングを追加できます。

 [CSS]

体 {

パディングトップ: 75px;

}

[/css]

固定ヘッダーの厚さによっては、パディングが大きくなったり小さくなったりすることに注意してください。

固定ヘッダーをスクイーズにする

ユーザーが特定のポイントを過ぎてスクロールするとヘッダーが細くなり、ぐにゃぐにゃに見えるのはよくあることです。ナビゲーションのサイズが小さくなると、ユーザーがメインの Web サイトコンテンツを表示するスペースを増やすことができます。これは、小型のデバイスで特に役立ちます。これを実現するために、CSS と JavaScript を組み合わせて使用します。

AnimatedHeader スクリプトを使用したスクイーズナビゲーション

スクロール時にサイズが変わるアニメーション化されたヘッダーを追加するには、ナビゲーションをスクイーズにする優れた軽量のソリューションがあります。 AnimatedHeader と呼ばれます。 MIT ライセンスを取得しているため、個人または商用のプロジェクトに使用できます。これらのファイルを取得するには、GitHub の AnimatedHeader を確認してください。

ナビゲーション用の基本的な CSS

2 つの重要な CSS スタイルを見てみましょう。最初の.navbar-fixed-topおそらく見覚えがあると思いますが、スティッキーナビゲーションの高さ、幅、および固定位置を指定します。以下では、75px の高さを指定する別のクラスが追加されていることがわかります。これが「つぶし」サイズです。

 [CSS]

.navbar-fixed-top {
位置: 固定;
上: 0;
左: 0;
幅: 100%;
背景: #f6f6f6;
Z インデックス: 999;
高さ: 90px;
オーバーフロー: 非表示;
-webkit-transition: 高さ 0.3 秒;
-moz-transition: 高さ 0.3 秒;
トランジション: 高さ 0.3 秒;
}

.navbar-fixed-top.cbp-af-header-shrink {
高さ: 75px;
}

[/css]

サイズを変更するには、JavaScript を使用して.cpb-af-header-shrinkのクラスを追加します。これを実現するスクリプトの部分を見てみましょう。

 [ジャバスクリプト]

関数 scrollPage() {
var sy = scrollY();
if ( sy &amp;amp;amp;amp;amp;amp;gt;= changeHeaderOn ) {
classie.add( ヘッダー, 'cbp-af-header-shrink' );
}
それ以外 {
classie.remove(ヘッダー、「cbp-af-header-shrink」);
}
didScroll = false;
}

[/ジャバスクリプト]

覚えておいてください。スクリプトには他にもあります。ソースコードをダウンロードして、すべてのコンポーネントを入手してください。ご覧のとおり、ユーザーがスクロールして特定のポイントを通過すると、 .cpb-af-header-shrinkのクラスが追加されます。ユーザーがページを上にスクロールすると、このクラスは削除されます。

CSS スティッキーポジショニングオプション

手間がかからないオプションもあります。設計しているブラウザのサポートに応じて、 position: sticky; スティッキーヘッダーの作成が非常に簡単になります。ブラウザーのサポートはひどいものではありませんが、完全にグローバルというわけでもありません。 sticky を宣言すると、プレフィックスを使用できます。詳細については、Can i Use をご覧ください。

スティッキーポジショニングを説明する簡単な方法は、相対ポジショニングと固定ポジショニングの組み合わせであるということです。スティッキーなポジショニングにかなり遭遇したと思います。ここではヘッダーについて話していますが、ユーザーがスクロールしているときに「スティッキー」にしたい UI 要素にも役立ちます。要素がビューポートの端から特定の距離に達すると、要素が「スタック」することがわかります。

要素は、特定のポイントに達するまで相対位置として扱われ、その後「固定」されます。この点は、CSS を使用して宣言されます。「ポイント」は基本的に、絶対配置の場合と同様に、上、下、左、または右を指定するときです。要素が「くっつく」ものを持つように指定する必要があります。

使用位置: スティッキー

使い方はとても簡単です。いくつかの CSS 宣言で、スティッキーヘッダーを作成できました。 3 つの簡単な手順を次に示します。

position:sticky;を使用して要素をスティッキーとして宣言できるように、正しいスタイルを見つけます。 ( position: -webkit-sticky;のようなブラウザーのプレフィックスを忘れないでください)。
「貼り付ける」アイテムの「貼り付けるエッジ」(上、右、下、または左) を選択します。
「スティッキーエッジ」からの距離を宣言します。つまり、スクロールエリアから 10 ピクセル離れたときにスティッキーになるヘッダーには 10 ピクセルを宣言します。

 [CSS]

.navbar-fixed-top {
  位置: -webkit-sticky;
  位置: スティッキー;
  上: 0;
}

[/css]

スティッキーヘッダーとビューポートの間にスペースを空けたくなかったので、上から 0 ピクセルにしました。この例は Codepen で見ることができます。

これらのスティッキーオーバーフローの状況に注意してください

オーバーフローの互換性

素晴らしいですが、完璧ではありません。いくつかの制限があります。オーバーフローは、少し予測できない場合があります。 position: sticky . オーバーフローの自動、スクロール、または非表示に問題がある可能性があります。

限られたブラウザのサポート

ブラウザーのサポートは限られているため、 supportsルールを使用して、現在のブラウザーがスティッキーポジショニングをサポートしているかどうかを検出することもできます。次のようになります。

 [CSS]

@supports(position:sticky){
  。ヘッダ{
    位置: -webkit-sticky;
    位置: スティッキー;
    上: 0;
  }
}

[/css]

スティッキーポジショニングが絶対に必要かどうかを考えることが重要です。そうであれば、固定配置アプローチを使用できます。絶対に必要でない場合、またはブラウザのサポートが問題にならない場合は、スティッキーアプローチの方が実装が簡単です。

最初は複雑に思えるかもしれませんが、ナビゲーションの轍にとらわれる理由はありません。ナビゲーションをくっきりさせるのは比較的簡単です。シンプルな CSS 固定ポジショニングを使用すると、スティッキーな Web サイトヘッダーを簡単に作成できます。いくつかの単純な JavaScript を使用すると、固定されたナビゲーションを拡張して高さを低くし、ユーザーが Web サイトのコンテンツを表示するためのスペースを増やすことができます。

ライブサイトでこれを試さないでください

Local で WP Engine がホストするサイトの固定 Web サイトヘッダーを作成します。詳細と無料ダウンロードはこちらから！

推奨される WordPress ステージングツールである Local のスクリーンショット

スティッキー Web サイト ヘッダーの作成方法