代码中使用了element-plus组件，需先安装

向下滑动前

向下滑动后（改变了logo   字体    背景颜色）

<script lang="ts" setup>
import router from '@/router';
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, onMounted, onUnmounted } from 'vue';const handleCommand = (command: string | number | object) => {// 进行路由跳转router.push('/helpCenter')
}// 判断滚动条的距离// 创建一个响应式的 ref 来存储视口距离顶部的距离  
const scrollTopDistance = ref(0);
let topDistance = ref(true)
// let topDistance = ref(false)// 监听滚动事件来更新视口距离顶部的距离  
const updateScrollDistance = () => {scrollTopDistance.value = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;// console.log(scrollTopDistance.value);if(scrollTopDistance.value == 0){topDistance.value = false}else{topDistance.value = true}};// 在组件挂载时添加滚动事件监听器  
onMounted(() => {window.addEventListener('scroll', updateScrollDistance);// 初始化时也获取一次距离  updateScrollDistance();});// 在组件卸载时移除滚动事件监听器  
onUnmounted(() => {window.removeEventListener('scroll', updateScrollDistance);
});</script><template><div class="nav" :class="{'bgcLight':topDistance}"><div class="left"><img @click="router.push('/videoProducing')" v-if="topDistance == false" src="../../assets/img/whiteLogo.png" alt=""><img @click="router.push('/videoProducing')" v-if="topDistance == true" src="../../assets/img/darkLogo.png" alt=""><ul><li @click="router.push('/videoProducing')">视频制作</li><li @click="router.push('broadcastCenter')">直播中心</li><li><el-dropdown @command="handleCommand"><span class="el-dropdown-link">帮助中心<el-icon class="el-icon--right"><arrow-down /></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-item>直播客户端下载</el-dropdown-item></el-dropdown-menu></template></el-dropdown></li></ul></div><div class="right">登录 / 注册</div></div></template><style lang="less" scoped>.nav {width: 100%;min-width: 800px;height: 70px;display: flex;justify-content: space-between;align-items: center;background-color: #040D1E;padding: 0 40px;color: white;box-sizing: border-box;.left {display: flex;align-items: center;img {height: 50px;&:hover{cursor: pointer;}}ul {display: flex;margin-left: 50px;li {list-style: none;padding: 0 10px;&:hover {color: #006eff;cursor: pointer;}.el-dropdown {// background-color: red;.el-dropdown-link {color: white;font-size: 16px;// 除去element原有样式outline: none;&:hover {color: #006eff;}}}}}}.right {width: 112px;height: 40px;line-height: 40px;background-color: #006EFF;text-align: center;font-size: 14px;border-radius: 20px;color: white;&:hover{cursor: pointer;}}
}// 根据鼠标滑动判断是否存在属性
.bgcLight{background-color: white;color: black;position: fixed;box-shadow: 0 4px 8px #d6dff580!important;;
}.bgcLight .el-dropdown-link{color: black !important;
}
</style>