Vue 3 中怎么用 watchEffect 实现页面滚动高度实时监听并计算吸顶导航透明度-Vue.js-PHP中文网

watchEffect 可自动监听滚动高度并动态控制吸顶导航透明度：在 onMounted 中初始化 scrollTop.value = window.scrollY，于 watchEffect 中读取该值并计算 opacity = Math.min(1, scrollTop.value / 80)，再通过 :style="{ opacity }" 绑定到导航元素。

vue 3 中怎么用 watcheffect 实现页面滚动高度实时监听并计算吸顶导航透明度

用 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（需求调研）等模块。

下载

模板中写：...>
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)
})
</p>

这样就完成了从滚动读取、数值计算到样式更新的闭环。整个过程没有手动依赖声明，没有重复计算，也没有遗漏卸载逻辑。