vue3头部滚动渐变

在 Vue3 中实现页面头部的滚动渐变效果，通常可以结合 CSS 和 Vue 的动态数据绑定能力来完成。这种效果可以通过 CSS 动画配合 scrollTop 变量来达成。下面是一个基本的步骤：

1. 首先，在 HTML 上创建一个包含背景渐变的 header 元素，并给它一个 ref，比如 `<header ref="topHeader">...</header>`。

2. 在 Vue 组件的 script 部分，引入 Vue 自带的 `$refs` 来访问这个元素：

import { ref } from 'vue';

export default {
  setup() {
    const topHeader = ref(null);
  }
}

3. 在生命周期钩子（如 `mounted()`）中，监听滚动事件并计算当前滚动位置：

mounted() {
  window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (topHeader.value) {
      setGradientColor(topHeader.value, scrollTop); // 假设 setGradientColor 是一个自定义函数，用于设置渐变色
    }
  });
},

4. 创建一个自定义函数 `setGradientColor`，在这个函数中应用滚动位置来改变 header 的背景颜色，实现渐变效果：

function setGradientColor(headerEl, scrollTop) {
  let gradientStartPoint = 0; // 滚动开始点的百分比
  let gradientEndPoint = 100; // 滚动结束点的百分比

  // 根据scrollTop计算渐变起点和终点
  if (scrollTop > 0) {
    gradientStartPoint = Math.min(Math.round(scrollTop / window.innerHeight * 100), gradientEndPoint);
    gradientEndPoint = 100;
  }

  // 设置 header 的背景渐变
  headerEl.style.background = `linear-gradient(to bottom, ${gradientStartPoint}% transparent, ${gradientEndPoint}% #your-color)`;
}

请注意，这只是一个基本示例，实际的渐变效果可能会因需求而有所不同。你可能还需要根据项目需求调整渐变的颜色、方向和其他细节。