实现导航栏吸顶操作

一、使用VueUse插件

javascript 复制代码
// 安装
npm i @vueuse/core

二、点击搜索useScroll

2.1搜索结果如图

三、使用

javascript 复制代码
// 这是示例代码
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;
}

四、当鼠标向下滑动超过100像素时导航栏切换样式

相关推荐
码农捻旧7 分钟前
前端性能优化:从之理论到实践的破局道
前端·性能优化
3Katrina8 分钟前
前端面试之防抖节流(一)
前端·javascript·面试
浏览器API调用工程师_Taylor20 分钟前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
赵润凤30 分钟前
Vue 高级视频播放器实现指南
前端
FogLetter44 分钟前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
小公主1 小时前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴1 小时前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子1 小时前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder1 小时前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛1 小时前
vue3中实现echarts打印功能
前端·vue.js·echarts