如何使用 JavaScript 實現網頁頂部固定導覽列的滾動隱藏效果？

如何使用 JavaScript 實作網頁頂部固定導覽列的滾動隱藏效果？

在現今的網路時代，網頁設計往往著重於使用者體驗和頁面功能的完整性。網頁導覽列是使用者與網站之間互動的橋樑，因此一般會將導覽列放置在頁面的頂部，以方便使用者快速找到所需資訊。然而，當使用者在瀏覽網頁時，長時間保持導覽列顯示在頂部可能會佔用頁面空間，讓使用者感受到不便。因此，為了提升使用者體驗，我們可以使用 JavaScript 實現網頁頂部固定導覽列的滾動隱藏效果。

實現此效果的方法是透過監聽滾動事件，根據滾動方向和滾動距離來判斷導覽列的顯示與隱藏。以下是範例程式碼：

// 获取导航栏元素
const navBar = document.querySelector('.navbar');
// 定义初始滚动位置
let lastScrollTop = 0;
// 定义初始导航栏高度
const navBarHeight = navBar.offsetHeight;

// 监听滚动事件
window.addEventListener('scroll', function() {
    // 获取当前滚动位置
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // 判断滚动方向
    if (scrollTop > lastScrollTop) {
        // 向下滚动，隐藏导航栏
        navBar.style.transform = `translateY(-${navBarHeight}px)`;
    } else if (scrollTop < lastScrollTop) {
        // 向上滚动，显示导航栏
        navBar.style.transform = 'translateY(0)';
    }

    // 更新滚动位置
    lastScrollTop = scrollTop;
});

以上程式碼首先透過 document.querySelector('.navbar') 取得了具有 .navbar 類別名稱的導覽列元素。接下來，我們定義了一個變數 lastScrollTop 用於儲存上次捲動的位置，並且使用 navBar.offsetHeight 取得了導覽列的高度。

然後，我們透過 window.addEventListener('scroll', function() { ... }) 來監聽滾動事件。在捲動事件的回呼函數中，我們首先取得目前的捲動位置 scrollTop。接下來，透過判斷目前捲動位置和上次捲動位置的大小關係，我們可以確定滾動的方向。

如果目前捲動位置大於上次捲動位置，則表示使用者向下捲動，我們將導覽列向上隱藏。需要注意的是，我們透過設定navBar.style.transform 的translateY 屬性來實現導覽列的移動，將導覽列的高度（navBarHeight）作為位移參考，以確保導航列完全隱藏。

相反，如果目前捲動位置小於上次捲動位置，則表示使用者向上捲動，我們將導覽列重新顯示。

最後，我們需要更新滾動位置 lastScrollTop，以便在下次滾動事件中做比較。

透過以上的程式碼範例，我們可以實現網頁頂部固定導覽列的滾動隱藏效果，從而提升了使用者的瀏覽體驗。當然，根據實際需求，我們可以根據導覽列的樣式和效果進行一些調整和改進，以實現更好的使用者互動效果。

以上是如何使用 JavaScript 實現網頁頂部固定導覽列的滾動隱藏效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！