スティッキーなウェブサイトヘッダーを作成する方法

公開: 2018-10-14

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

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

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

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

何がベタベタするのですか？

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

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

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

ナビゲーションを1か所に留めるにはどうすればよいですか？

ナビゲーションをスティッキーにするのは簡単なことではありません。それはCSSスタイリングで行われるだけです。基本的には次のようになります。

.navbar-fixed-top {

position: fixed;

right: 0;

left: 0;

z-index: 999;

}

ページの長さや上下にスクロールする回数に関係なく、ナビゲーションはページの上部に「スタック」します。ナビゲーションの配置を作成する.navbar-fixed-topというクラスがナビゲーションに追加されました。このクラスをnavタグに追加しました。位置は固定に設定され、左右の位置を追加することで、配置が正しくなり、ページの幅全体を占めるようになります。
このクラスが適用されるときはいつでも、要素の固定位置が作成されることに注意してください。ほとんどの場合、このクラスは1回だけ適用されます。そうしないと、同じ場所で同じように動作する複数のページ要素が存在し、混乱が生じます。

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

ページ本文を調整する

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

body {

padding-top: 75px;

}

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

スティッキーサイトヘッダーで販売されていませんか？粘着性のあるトップツートップボタンをサイトに追加する方法を学びます。

粘着性のあるヘッダーをスクイーズにする

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

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

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

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

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

.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f6f6f6;
z-index: 999;
height: 90px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

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

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

function scrollPage() {
var sy = scrollY();
if ( sy &amp;amp;amp;amp;amp;gt;= changeHeaderOn ) {
classie.add( header, 'cbp-af-header-shrink' );
}
else {
classie.remove( header, 'cbp-af-header-shrink' );
}
didScroll = false;
}

念のために言っておきますが、スクリプトにはまだまだあります。すべてのコンポーネントを入手できるように、必ずソースコードをダウンロードしてください。ご覧のとおり、ユーザーが特定のポイントを超えてスクロールすると、 .cpb-af-header-shrinkのクラスが追加されます。ユーザーがページを上にスクロールして戻ると、このクラスは削除されます。

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

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

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

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

使用位置：粘着性

使い方はとても簡単です。いくつかのCSS宣言と私はスティッキーヘッダーを持つことができました。ここに3つの簡単なステップがあります：

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

.navbar-fixed-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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

注意すべきスティッキーオーバーフローの状況

オーバーフローの互換性

それは素晴らしいですが、完璧ではありません。いくつかの制限があります。オーバーフローは、少し予測できない場合があります。 position: sticky ）を使用して、親要素の特定のタイプのオーバーフローを回避することをお勧めします。オーバーフローの自動、スクロール、または非表示に問題がある可能性があります。

限定的なブラウザサポート

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

@supports(position:sticky){
  .header{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

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

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

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

あなたのサイトがローカルにある間に粘着性のあるウェブサイトヘッダーを作成してください！詳細については、こちらから無料でダウンロードしてください。

この記事は、もともと2016年2月2日に公開されました。最終更新日は、2018年10月14日です。