顶部悬停效果，吸顶，到底一定位置顶部透明化，回到底部之后，由虚变实

向远方~

于 2023-04-12 14:27:38 发布

阅读量207

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_60311760/article/details/130106441

版权

该代码示例展示了如何在Vue3中使用`<scriptsetup>`语法监听窗口滚动事件，根据滚动位置改变`.inputname`类元素的背景颜色，创建一个从绿色到透明的平滑过渡效果。通过计算滚动距离和预设阈值来调整背景颜色的透明度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<template>
  <div class="aaa"  style="height: 2000px;">
    <div class="inputname"  :style="{'background-color':backgroundColor,height:'50px',width:'100%'}">
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref,reactive} from "vue"
const backgroundColor = ref("#95ec69")
 const handleScroll= ()=> {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 
    let offsetTop = document.querySelector(".inputname").offsetTop;
      let he1 = 1300 -scrollTop
      backgroundColor.value = `rgba(149, 236, 105,${he1 / 1300})`;
  }
  window.addEventListener("scroll", handleScroll);

</script>

<style scoped>
.inputname {
  position: sticky;
  background: red;
  top: 0;
  font-size: 20px;
  z-index: 1;
}
</style>