香草JavaScript：創建動畫粘性導航菜單-js教程-PHP中文網

Vanilla Javascript: Creating Animated Sticky Navigation Menu

核心要點

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

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

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

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

粘性導航菜單：基本的HTML結構

以下是我們將使用的基本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%。

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

.container{
  width: 100%;
}

登入後複製

橫幅容器

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

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

登入後複製

橫幅部分

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

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

登入後複製

內容部分

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

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

登入後複製

菜單動畫

首先，我們需要將事件處理程序附加到滾動事件，以便在用戶滾動時可以相應地顯示和隱藏菜單。我們還將所有內容放在一個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>

登入後複製

設置一些初始值

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

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

.container{
  width: 100%;
}

登入後複製

建立滾動方向

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

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

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

登入後複製

向下滾動將使newOffset大於refOffset，導航菜單應該向上滑動並消失。向上滾動將使newOffset小於refOffset，導航菜單應該以半透明效果滑回視野。進行此比較後，我們需要使用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來實現：

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

登入後複製

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

(() => {
  'use strict';

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

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

登入後複製

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

演示

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

結論

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