vue3鼠标向下滑动,导航条改变背景颜色和logo的封装

代码中使用了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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/510301.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

课程15 光在晶体中的传播(三)(视频P53-55)

旋光与菲涅尔棱镜 旋光现象 说明从石英晶片出射的&#xff0c;依然是线偏振光&#xff0c;其偏振面却发生了旋转。 左旋石英与右旋石英 ![左旋石英与右旋石英![](https://img-blog.csdnimg.cn/direct/6ead0356c3c740169ba6e723863b743b.png) 旋光异构体 右旋石英表现出φR &a…

基于单片机30mv和300v量程的电压表仿真设计

**单片机设计介绍&#xff0c;基于单片机30mv和300v量程的电压表仿真设计 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机30mV和300V量程的电压表仿真设计&#xff0c;是一个旨在通过单片机实现宽量程电压测量和显示的综合性项目…

RH850从0搭建Autosar开发环境【3X】- Davinci Configurator之RTE模块配置详解(上)

RTE模块配置详解 - 上 一、RTE模块配置实操1.1 打开RTE模块1.2 RTE模块错误消除在这里插入图片描述 这里我们利用工具的自动处理功能。二、Configurator工具Validation总结本节我们就手把手详解RTE配置实现,其实也没有什么过多的操作。。。这个模块更多是工具自动处理的。 一、…

python当中的复数到底有什么用

复数看起来很简单&#xff0c;就是一个数加另外一个数&#xff0c;然后带有J的就是复数。 复数在 Python 中的内部类型是 complex。Python 提供了对复数的内置支持&#xff0c;因此可以直接进行复数的相关计算。复数由实部和虚部构成&#xff0c;可以使用 "j" 或 &qu…

golang语言系列:Authentication、OAuth、JWT 认证策略

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 golang语言系列 文章&#xff0c;主要对编程通用技能 Authentication、OAuth、JWT 认证策略 进行学习 1.Basic Authentication认证 每个请求都需要将 用户名密码 进行base64编码后&#xff0c;放在请求头的Aut…

Scikit-Learn K均值聚类

Scikit-Learn K均值聚类 1、K均值聚类1.1、K均值聚类及原理1.2、K均值聚类的优缺点 2、Scikit-Learn K均值聚类2.1、Scikit-Learn K均值聚类API2.2、K均值聚类案例 1、K均值聚类 K-均值&#xff08;K-Means&#xff09;是一种聚类算法&#xff0c;属于无监督学习。K-Means在机器…

python使用subprocess模拟输入adb命令

如何在Python中执行ADB命令 1. 简介 ADB&#xff08;Android Debug Bridge&#xff09;是Android开发工具包&#xff08;SDK&#xff09;提供的一个命令行工具&#xff0c;用于与Android设备进行通信和调试。在Python中&#xff0c;我们可以通过调用系统命令来执行ADB命令。本…

vue项目视频播放ckplayer使用

ckplayer 官方网址&#xff0c;点击访问 1&#xff0c;打开网页后能看到这里&#xff0c;我现在使用的是最新 X3版手册 2&#xff0c;这个ckplayer不是npm 插件&#xff0c;要下载安装包解压到项目里面使用 安装包网址 通过gitee下载 3&#xff0c;解析安装包到项目中 publ…

ChatGPT会取代Salesforce顾问吗?

当ChatGPT问世时&#xff0c;许多Salesforce顾问很乐意使用该工具完成日常任务。然而&#xff0c;许多专业人士仍未使用过该工具或发现它的多种功能。Salesforce顾问负责处理复杂的项目、兼顾客户需求&#xff0c;并在不断发展的生态系统中通过各种云服务保持领先地位。因此&am…

【图论】【拓扑排序】1857. 有向图中最大颜色值

本文涉及的知识点 图论 拓扑排序 LeetCode1857. 有向图中最大颜色值 给你一个 有向图 &#xff0c;它含有 n 个节点和 m 条边。节点编号从 0 到 n - 1 。 给你一个字符串 colors &#xff0c;其中 colors[i] 是小写英文字母&#xff0c;表示图中第 i 个节点的 颜色 &#xf…

【深耕 Python】Data Science with Python 数据科学(7)书352页练习题

写在前面 关于数据科学环境的建立&#xff0c;可以参考我的博客&#xff1a; 【深耕 Python】Data Science with Python 数据科学&#xff08;1&#xff09;环境搭建 往期数据科学博文&#xff1a; 【深耕 Python】Data Science with Python 数据科学&#xff08;2&#xf…

鸿蒙实战开发-如何实现多设备自适应服务卡片

​介绍 本示例展示Js工程中服务卡片的布局和使用&#xff0c;其中卡片内容显示使用了一次开发&#xff0c;多端部署的能力实现多设备自适应。用到了卡片扩展模块接口&#xff0c;ohos.app.form.FormExtensionAbility 。 卡片信息和状态等相关类型和枚举接口&#xff0c;ohos.…

避雷!新增5本SCI被标记On Hold!1区、CCF推荐上榜

毕业推荐 SSCI • 社科类&#xff0c;分区稳步上升&#xff08;最快13天录用&#xff09; IEEE&#xff1a; • 计算机类&#xff0c;1区(TOP)&#xff0c;CCF推荐 SCIE • 计算机工程类&#xff0c;CCF推荐&#xff08;最快16天录用&#xff09; 期刊动态 科睿唯安新增5…

再谈数据中心网络传输

我在 大历史下的 pacing 中误会程序员了&#xff0c;程序员的路子是正确的(虽然并不指网络方面)。本文接着扯网络&#xff0c;从系统程序员熟悉的开始&#xff1a; 当 cpu 过多时&#xff0c;把大的 spinlock 拆成 percpu lock&#xff1b;使用 hash 时&#xff0c;倾向于 per…

C++之智能指针std::unique_ptr与std::make_unique分配内存方式总结(二百六十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

【Zblog搭建博客网站】windows环境搭建属于自己的博客并发布上线 – cpolar内网穿透

目录 1. 前言 2. Z-blog网站搭建 2.1 XAMPP环境设置 2.2 Z-blog安装 2.3 Z-blog网页测试 2.4 Cpolar安装和注册 3. 本地网页发布 3.1. Cpolar云端设置 3.2 Cpolar本地设置 4. 公网访问测试 5. 结语 1. 前言 想要成为一个合格的技术宅或程序员&#xff0c;自己搭建网…

Nacos单机版安装

1. 下载 nacos-server-2.0.3.tar.gz 官网 https://github.com/alibaba/nacos/releases 2. 上传到服务器 3. 解压 tar -zxvf nacos-server-2.0.3.tar.gz -C /opt 4. 配置数据库 4.1准备好mysql数据库 4.2创建一个新的数据库 创建新数据库nacos 4.3执行nacos建库脚本 在…

XMind 2023 下载地址及安装教程

XMind是一款流行的思维导图软件&#xff0c;它帮助用户以图形化的方式组织和呈现思维、概念和信息。XMind可以应用于各个领域&#xff0c;如项目管理、思维导图、会议记录、学习笔记等。 XMind提供了直观和易于使用的界面&#xff0c;用户可以通过拖放和连线来创建思维导图。它…

2024第16届成都学校团餐供应链展6月1日举办

2024第16届成都学校团餐供应链展6月1日举办 邀请函 主办单位&#xff1a; 中国西部教体融合博览会组委会 承办单位&#xff1a;重庆港华展览有限公司 博览会主题&#xff1a;责任教育 科教兴邦 学校团餐&#xff0c;就是老师和学生团体用餐的简称&#xff0c;也叫学校食堂…

使用Flutter混淆技术保护应用隐私与数据安全

在移动应用开发中&#xff0c;保护应用代码安全至关重要。Flutter 提供了简单易用的混淆工具&#xff0c;帮助开发者在构建 release 版本应用时有效保护代码。本文将介绍如何在 Flutter 应用中使用混淆&#xff0c;并提供了相关的操作步骤和注意事项。 &#x1f4dd; 摘要 本…