最近用蝦皮買東西發現有個功能滿喜歡的，在app上搜尋商品的時候只要開始往下滑動畫面，選單欄就會消失，但如果只要往上移動一些些，選單欄就會跑出來可以執行想要的操作

想了一下這個功能可以如何實現，以下是透過改變class的方式

前置

框架：vue3 composition API

html畫面：上方是選單(class='navbar')

綁定class條件：當isHidden為true時，加上hidden這個class

下方是內容區塊

<template>
  <div class="app">
    <!-- 選單 (滾動時隱藏/顯示) -->
    <div :class="['navbar', { 'hidden': isHidden }]">
      選單
    </div>

    <!-- 內容區塊 -->
    <div class="content">
    </div>
  </div>
</template>

Javascript

設定isHidden初始值(記得用ref)

給定滾動值lastScrollY = 0

設定監聽事件

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const isHidden = ref(false);
let lastScrollY = 0;

// 監聽滾動事件
const handleScroll = () => {
  const currentScrollY = window.scrollY;
  isHidden.value = currentScrollY > lastScrollY; // 如果往下滾動，隱藏選單
  lastScrollY = currentScrollY;
};

// 掛載/移除滾動監聽
onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>

<style>
/* 選單樣式 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  text-align: center;
  padding: 10px 0;
  transition: transform 0.3s ease-in-out;
}

/* 隱藏選單 */
.hidden {
  transform: translateY(-100%);
}

/* 內容區塊 */
.content {
  margin-top: 60px;
  padding: 20px;
  height: 200vh; /* 增加可滾動的高度 */
  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
}
</style>

使用 transform: translateY(-100%) 平滑隱藏選單
transition 讓動作流暢

用一般js語法

後來發現w3school也有類似的功能

簡單總結一下

• 一樣是將navbar的位置固定
• 使用window.pageYOffset定義卷軸位置
• 藉由改變navbar的css:top值做出隱藏/浮出的效果

https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

scrollY vs. window.pageYOffset ?

MDN寫到

pageYOffset 属性是 scrollY 属性的别名：

window.pageYOffset == window.scrollY; // 总是返回 true