Vanilla JavaScript：アニメーションのスティッキーナビゲーションメニューの作成

コアポイント

• jQueryプラグインを必要とせずにアニメーションのスティッキーナビゲーションメニューを作成します。メニューは、スクロールするときに視界からスライドして、スクロールするときに半透明の効果で視界に戻ってスライドするように設計されています。
• このプロセスには、基本的なHTML構造のセットアップ、メイン要素にスタイルを適用してからメニューをアニメーション化することが含まれます。アニメーションは、イベントハンドラーをスクロールイベントに添付し、CSS変換を使用してスクロール方向に応じてメニューの位置と外観を調整することによりトリガーされます。
• このカスタマイズソリューションは、設計の柔軟性を高め、特定のニーズに応じて簡単にカスタマイズできるようになります。最終結果は、ユーザーエクスペリエンスを向上させる動的なインタラクティブナビゲーションメニューです。

Webナビゲーションメニューの設計では、メニューの場所、スタイル、レスポンシブデザインなど、多くの要因を考慮する必要があります。また、いくつかのアニメーション効果を追加することもできます（もちろん、ちょうどいいです）。この時点で、jQueryプラグインを使用してほとんどの作業を行う傾向があります。しかし、実際には必要ありません！独自のソリューションを簡単に作成するには、数行のコードしかかかりません。

この記事では、純粋なJavaScript、CSS、およびHTMLを使用して、アニメーションのスティッキーナビゲーションメニューを作成する方法を示します。最終製品は、ページを下にスクロールするときにスワイプし、スクロールするときにスライドしてビューに戻ります（スタイリッシュな半透明の効果があります）。このテクノロジーは、MediumやHackerの正午などの有名なWebサイトで使用されています。

読んだ後、このテクノロジーをデザインで使用して、良い結果を達成することを望んでいます。緊急の読者が参照するための記事の最後にデモがあります。

スティッキーナビゲーションメニュー：基本的なHTML構造

以下は、使用する基本的なHTMLコードフレームワークです。ここには何もエキサイティングなことはありません。

<code class="language-html"><div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">

      </div>
      <div class="nav">

      </div>
    </div>
  </div>

  <div class="content">

  </div>
</div></code>

いくつかのスタイルを適用します

メイン要素にいくつかのスタイルを追加しましょう。

メインコンテナ

固有のブラウザスタイルを削除し、コンテナの幅を100％に設定する必要があります。

<code class="language-css">*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}</code>

バナーコンテナ

これは、ナビゲーションメニューのラッパーです。ページを垂直にスクロールするときに、ナビゲーションメニューを非表示または表示するのは常に粘着性があり、スライドします。 Z-Index値を提供して、コンテンツの上に表示されることを確認します。

<code class="language-css">.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}</code>

バナーセクション

これにはナビゲーションメニューが含まれています。ページが上下にスクロールすると、位置と背景色の変更はCSSトランジションプロパティによってアニメーション化されます。

<code class="language-css">.banner {
  height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}</code>

コンテンツパート

このセクションには、背景画像とテキストが含まれています。この記事の後半で、このページに視差効果を追加します。

<code class="language-css">.content {
  background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
  background-size: cover;
  padding-top: 100%;
}</code>

メニューアニメーション

最初に、ユーザーがスクロールするときにメニューを表示して非表示にできるように、イベントハンドラーをスクロールイベントに添付する必要があります。また、同じページで実行されている他のコードとの競合を避けるために、すべてを1つのIIFEに入れます。

<code class="language-html"><div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">

      </div>
      <div class="nav">

      </div>
    </div>
  </div>

  <div class="content">

  </div>
</div></code>

いくつかの初期値を設定

RefOffset変数を使用して、ユーザーが下にスクロールする距離を示します。ページが読み込まれると、0に初期化されます。 BannerHeight変数を使用してメニューの高さを保存し、.banner-wrapperおよび.bannerDOM要素への参照も必要です。

<code class="language-css">*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}</code>

スクロール方向を作成

次に、メニューをそれに応じて表示または非表示にできるように、スクロール方向を決定する必要があります。

NewOffsetという変数から始めます。ページが読み込まれると、これはwindow.scrollYの値に設定されます - ドキュメントが現在垂直にスクロールしているピクセルの数（最初は0）。ユーザーがスクロールすると、NewOffsetはそれに応じて増加または減少します。 Bannerheightに保存されている値よりも大きい場合、メニューが視界からスクロールされていることがわかります。

<code class="language-css">.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}</code>

下にスクロールすると、NewOffsetがRefOffsetよりも大きくなり、ナビゲーションメニューがスライドして消えます。スクロールアップすると、NewOffsetがRefOffsetよりも小さくなり、ナビゲーションメニューは半透明の効果で視界に戻って戻ってきます。この比較の後、ユーザーがスクロールする距離を追跡するために、newOffsetの値で再オフェットを更新する必要があります。

<code class="language-css">.banner {
  height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}</code>

メニューアニメーション

最後に、メニューを表示して非表示にするためのアニメーションを追加しましょう。次のCSSを使用してこれを達成できます。

また、ページの上部に到達したら、メニューから半透明の効果が削除されることを確認する必要があります。

<code class="language-css">.content {
  background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
  background-size: cover;
  padding-top: 100%;
}</code>

ご覧のとおり、それに応じてさまざまなCSSクラスを削除/適用しています。

<code class="language-javascript">(() => {
  'use strict';

  const handler = () => {
    //DOM操作代码在此处
  };

  window.addEventListener('scroll', handler, false);
})();</code>

demo

これは、作業メニューのデモです。 （CodePenデモリンクは、外部のWebサイトにアクセスできないため、ここに挿入する必要があります。実際のリンクは提供できません）

結論

この記事では、アニメーションナビゲーションメニューを設計するために純粋なJavaScript（jQuery不要）を使用して数行のコードを作成する方法について説明します。スクロールすると、メニューがスクロールすると、メニューがスライドして透明な効果で表示されます。これは、垂直スクロール方向を監視し、必要に応じてCSS変換をDOM要素に適用することによって行われます。このカスタムソリューションにより、ニーズと仕様に応じて、簡単かつ柔軟に設計できる自由が高まります。

JavaScriptスキルを向上させたいですか？ JavaScriptとJavaScript：Nextで始まるコースをご覧ください。

この記事は、Vildan Softicによって査読されました。 SetePointのすべてのピアレビューアーズに感謝します。

（JavaScriptアニメーションのSticky NavigationメニューのFAQセクションをここに含める必要があり、コンテンツは入力テキストと一致しています。スペースの制限のため、ここで省略されています。

以上がVanilla JavaScript：アニメーションのスティッキーナビゲーションメニューの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。