核心要點

• 使用純JavaScript、CSS和HTML，無需jQuery插件，即可創(chuàng)建動畫粘性導(dǎo)航菜單。菜單設(shè)計為向下滾動時滑出視野，向上滾動時以半透明效果滑回視野。
• 此過程包括設(shè)置基本的HTML結(jié)構(gòu)、為主要元素應(yīng)用樣式，然後為菜單設(shè)置動畫。動畫通過將事件處理程序附加到滾動事件，並使用CSS轉(zhuǎn)換根據(jù)滾動方向調(diào)整菜單的位置和外觀來觸發(fā)。
• 此自定義解決方案提供更多設(shè)計靈活性，並允許根據(jù)特定需求輕鬆自定義。最終結(jié)果是一個動態(tài)的交互式導(dǎo)航菜單，可增強(qiáng)用戶體驗。

網(wǎng)頁導(dǎo)航菜單設(shè)計需考慮諸多因素，例如菜單位置、樣式和響應(yīng)式設(shè)計。您可能還希望添加一些動畫效果（當(dāng)然，要恰到好處）。這時，您可能會傾向於使用jQuery插件來完成大部分工作。但其實沒必要！只需幾行代碼，就能輕鬆創(chuàng)建自己的解決方案。

本文將演示如何使用純JavaScript、CSS和HTML創(chuàng)建動畫粘性導(dǎo)航菜單。最終產(chǎn)品會在您向下滾動頁面時向上滑動消失，向上滾動時（帶有時尚的半透明效果）滑回視野。 Medium和Hacker Noon等知名網(wǎng)站都使用了這種技術(shù)。

閱讀後，您將能夠在自己的設(shè)計中運用此技術(shù)，希望能取得良好的效果。文章末尾有一個演示，供著急的讀者參考。

粘性導(dǎo)航菜單：基本的HTML結(jié)構(gòu)

以下是我們將使用的基本HTML代碼框架。這裡沒有什麼令人興奮的內(nèi)容。

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

應(yīng)用一些樣式

讓我們?yōu)橹饕靥砑右恍邮健?

主要容器

我們需要移除任何固有的瀏覽器樣式，並將容器的寬度設(shè)置為100%。

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

.container{
  width: 100%;
}

橫幅容器

這是導(dǎo)航菜單的包裝器。它始終是粘性的，並在您垂直滾動頁面時滑動以隱藏或顯示導(dǎo)航菜單。我們賦予它一個z-index值，以確保它顯示在內(nèi)容之上。

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

橫幅部分

這包含導(dǎo)航菜單。當(dāng)頁面向上或向下滾動時，位置和背景顏色的變化通過CSS transition屬性進(jìn)行動畫處理。

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

內(nèi)容部分

此部分將包含背景圖像和文本。我們將在本文的後面部分為此頁面添加視差效果。

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

菜單動畫

首先，我們需要將事件處理程序附加到滾動事件，以便在用戶滾動時可以相應(yīng)地顯示和隱藏菜單。我們還將所有內(nèi)容放在一個IIFE中，以避免與同一頁面上運行的其他代碼發(fā)生衝突。

<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變量來表示用戶向下滾動的距離。在頁面加載時，它初始化為0。我們將使用bannerHeight變量來存儲菜單的高度，並且還需要.banner-wrapper和.banner DOM元素的引用。

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

.container{
  width: 100%;
}

建立滾動方向

接下來，我們需要確定滾動方向，以便可以相應(yīng)地顯示或隱藏菜單。

我們將從一個名為newOffset的變量開始。在頁面加載時，這將設(shè)置為window.scrollY的值——文檔當(dāng)前垂直滾動的像素數(shù)（因此最初為0）。當(dāng)用戶滾動時，newOffset將相應(yīng)地增加或減少。如果它大於bannerHeight中存儲的值，那麼我們就知道我們的菜單已滾動到視野之外。

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

向下滾動將使newOffset大於refOffset，導(dǎo)航菜單應(yīng)該向上滑動並消失。向上滾動將使newOffset小於refOffset，導(dǎo)航菜單應(yīng)該以半透明效果滑回視野。進(jìn)行此比較後，我們需要使用newOffset的值更新refOffset，以跟蹤用戶滾動的距離。

.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來實現(xiàn)：

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

我們還應(yīng)該確保一旦到達(dá)頁面頂部，就從菜單中移除半透明效果。

(() => {
  'use strict';

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

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

如您所見，我們正在相應(yīng)地移除/應(yīng)用不同的CSS類。

演示

這是一個工作菜單的演示。 （此處應(yīng)插入CodePen演示鏈接，由於我無法訪問外部網(wǎng)站，無法提供實際鏈接）

結(jié)論

本文介紹瞭如何使用純JavaScript（無需jQuery）編寫幾行代碼來設(shè)計動畫導(dǎo)航菜單。向下滾動時，菜單會滑動消失；向上滾動時，菜單會以透明效果滑回視野。這是通過監(jiān)控垂直滾動方向並在需要時將CSS轉(zhuǎn)換應(yīng)用於DOM元素來實現(xiàn)的。這種自定義解決方案使您可以更自由地根據(jù)自己的需求和規(guī)格輕鬆靈活地進(jìn)行設(shè)計。

想提升您的JavaScript技能嗎？請查看我們的課程《JavaScript入門》和《JavaScript：下一步》。

本文由Vildan Softic同行評審。感謝所有SitePoint的同行評審員，使SitePoint的內(nèi)容達(dá)到最佳狀態(tài)！

(此處應(yīng)包含JavaScript動畫粘性導(dǎo)航菜單的常見問題解答部分，內(nèi)容與輸入文本中的一致。由於篇幅限制，此處省略。)

以上是香草JavaScript：創(chuàng)建動畫粘性導(dǎo)航菜單的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！