如何使用 JavaScript 實現網頁頂部固定導航欄的透明度漸變效果？

2021-07-19 19:24:00 前端筆記 180

在網頁設計中，頂部導航欄是一個非常重要的組件，它不僅可以方便用戶進行頁面導航，還可以起到修飾頁面布局的作用。而在一些時候，我們希望頂部導航欄在頁面滾動時具有透明度漸變的效果，以便更好地適應頁面內容。本篇文章將介紹如何使用 JavaScript 實現這樣的效果，并提供具體的代碼示例。

首先，我們需要一個基本的 HTML 結構，包含一個頂部導航欄，所示：

<!DOCTYPE html><html><head>    <title>頂部導航欄透明度漸變效果</title>    <style>        /* 設置導航欄樣式 */        #navbar {            position: fixed;            top: 0;            left: 0;            width: 100%;            height: 50px;            background-color: #ffffff;            transition: background-color 0.3s;        }        /* 確保頁面內容從導航欄下方開始顯示 */        #content {            margin-top: 50px;        }    </style></head><body>    <div id="navbar">        <!-- 導航欄內容 -->    </div>    <div id="content">        <!-- 頁面內容 -->    </div>    <script src="main.js"></script></body></html>

在 CSS 部分，我們設置了導航欄的基本樣式，包括寬度、高度以及背景顏色，并使用 transition 屬性設置了透明度的漸變效果。我們還設置了一個名為 content 的 div 來確保頁面內容從導航欄下方開始顯示。

接下來，我們需要在 JavaScript 中實現透明度漸變的效果。我們可以使用 window 對象的 scroll 事件監聽頁面滾動的變化，并根據滾動位置來改變導航欄的透明度。

創建一個名為 main.js 的 JavaScript 文件，并將以下代碼粘貼進去：

// 獲取導航欄元素var navbar = document.getElementById("navbar");// 監聽頁面滾動事件window.addEventListener("scroll", function() {    // 計算頁面滾動距離    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;        // 計算滾動距離與導航欄高度之比    var ratio = scrollTop / navbar.offsetHeight;        // 根據比值設置導航欄的透明度    if (ratio < 0.5) {        navbar.style.backgroundColor = "rgba(255, 255, 255, " + ratio + ")";    } else {        navbar.style.backgroundColor = "rgba(255, 255, 255, 0.5)";    }});

在 JavaScript 代碼中，我們首先通過 getElementById 方法獲取導航欄元素。然后，我們使用 addEventListener 方法監聽了 scroll 事件，當頁面發生滾動時會執行對應的回調函數。

在回調函數中，我們通過 window.pageYOffset 獲取頁面的滾動距離，如果瀏覽器不支持該屬性，則使用 document.documentElement.scrollTop 或者 document.body.scrollTop 來獲取相同的值。

我們接著計算滾動距離與導航欄高度之比，并根據比值來設置導航欄的透明度。當滾動比值小于 0.5 時，我們使用 rgba 函數設置導航欄的背景顏色，其中透明度通過比值來決定。當滾動比值大于等于 0.5 時，我們固定導航欄的背景顏色為半透明。

最后，我們需要在 HTML 文件中引入 JavaScript 文件：