コアポイント

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

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

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

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

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

以下は、使用する基本的な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>

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

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

メインコンテナ

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

*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}

バナーコンテナ

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

.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}

バナーセクション

これにはナビゲーションメニューが含まれています。ページが上下にスクロールすると、位置と背景色の変更は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;
}

コンテンツパート

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

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

メニューアニメーション

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

<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>

いくつかの初期値を設(shè)定

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

*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}

スクロール方向を作成

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

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

.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}

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

.banner {
  height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}

メニューアニメーション

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

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

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

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

(() => {
  'use strict';

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

  window.addEventListener('scroll', handler, false);
})();

demo

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

結(jié)論

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

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

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

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

以上がVanilla JavaScript：アニメーションのスティッキーナビゲーションメニューの作成の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。