watchEffect 可自动监听滚动高度并动态控制吸顶导航透明度：在 onMounted 中初始化 scrollTop.value = window.scrollY，于 watchEffect 中读取该值并计算 opacity = Math.min(1, scrollTop.value / 80)，再通过 :style="{ opacity }" 绑定到导航元素。
用 watchEffect 监听滚动高度并动态控制吸顶导航透明度，核心在于：**自动追踪 scrollTop 值变化，并将它映射为 0～1 的透明度（opacity）**。不需要手动写 addEventListener + removeEventListener，也不用额外 watch 配置，watchEffect 的自动依赖收集和立即执行特性正适合这类“读取即响应”的场景。
获取并响应滚动高度
先用 ref 存储当前滚动距离，再在 watchEffect 中读取它——Vue 会自动把这个 ref 当作依赖。关键点是：必须在组件挂载后才开始读取 window.scrollY，否则初始值可能为 0 且无法触发更新。
- 在
onMounted中初始化scrollTop.value = window.scrollY - 把
scrollTop.value放进watchEffect回调里，Vue 就能感知变化 - 不要在
watchEffect外部直接赋值scrollTop.value = ...，否则会破坏响应式链路
计算透明度逻辑
吸顶导航的透明度通常随滚动距离线性变化：未滚动时全透明（opacity: 0），滚过一定阈值（比如 80px）后变为不透明（opacity: 1）。中间过渡用插值即可。
- 设吸顶生效起始高度为
threshold = 80 - 透明度 =
Math.min(1, scrollTop.value / threshold) - 若需反向效果（如越往下越透明），可改为
Math.max(0, 1 - scrollTop.value / threshold)
绑定到 DOM 元素
把计算出的透明度值通过 :style 绑定到吸顶导航容器上。注意单位省略，CSS opacity 接收纯数字。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 模板中写：
<nav :style="{ opacity }">...</nav> -
opacity是一个ref，在watchEffect中持续更新其.value - 避免在模板中写内联表达式（如
:style="{ opacity: scrollTop.value / 80 }"），那样会失去响应式缓存，且无法做边界限制
完整代码示例
（基于 <script setup></script>）
import { ref, onMounted, watchEffect } from 'vue'
<p>const scrollTop = ref(0)
const opacity = ref(0)
const threshold = 80</p><p>onMounted(() => {
scrollTop.value = window.scrollY
const handleScroll = () => {
scrollTop.value = window.scrollY
}
window.addEventListener('scroll', handleScroll)</p><p>// 清理监听
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
})
})</p><p>watchEffect(() => {
opacity.value = Math.min(1, scrollTop.value / threshold)
})
这样就完成了从滚动读取、数值计算到样式更新的闭环。整个过程没有手动依赖声明，没有重复计算，也没有遗漏卸载逻辑。
