实现导航栏吸顶操作

最新推荐文章于 2025-05-14 15:47:02 发布

Pinia_0819

最新推荐文章于 2025-05-14 15:47:02 发布

阅读量1k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： vue 项目功能文章标签：前端 vue elementui

本文链接：https://blog.youkuaiyun.com/weixin_50466102/article/details/135476591

vue 同时被 2 个专栏收录

10 篇文章

订阅专栏

项目功能

6 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用VueUse插件中的useScroll功能，通过监听滚动事件来控制导航栏样式变化，当鼠标滑动超过100像素时切换样式。

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

一、使用VueUse插件

// 安装
npm i @vueuse/core

二、点击搜索useScroll

2.1搜索结果如图
在这里插入图片描述

三、使用

// 这是示例代码
import { useScroll } from '@vueuse/core'
const el = ref<HTMLElement | null>(null)
const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
// 我自己的代码
import { useScroll } from '@vueuse/core';
// 直接解构赋值拿到 当鼠标向下滑动时滑动的距离
const { y } = useScroll(window);
// html结构代码
<div class="box" :class="{flotbox: y > 100}"> 
    <div class="box_l">
      <img v-if="y > 100" src="@/assets/indexLogo1.png" alt="">
      <img v-else src="@/assets/indexLogo.png" alt="">
    </div>
    <div class="box_c">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">产品技术</el-menu-item>
        <el-menu-item index="3">解决方案</el-menu-item>
        <el-menu-item index="4">行业洞见</el-menu-item>
        <el-menu-item index="5">关于我们</el-menu-item>
      </el-menu>
    </div>
// css核心代码 使用的是固定定位
.box {
  position: fixed;
  top: 0;
  left: 0;
}