实现导航栏吸顶操作

一、使用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像素时导航栏切换样式

相关推荐
人工智能训练师2 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny072 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy3 小时前
css的基本知识
前端·css
昔人'3 小时前
css `lh`单位
前端·css
Nan_Shu_6144 小时前
Web前端面试题(2)
前端
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光6 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5206 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20506 小时前
LeaferJS好用的 Canvas 引擎
前端·开源