实现导航栏吸顶操作

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

相关推荐
新人11yj43 分钟前
如何给网页增加滚动到顶部的功能
前端·javascript
掘金一周3 分钟前
Figma Dev Mode MCP:大人,时代变了 | 掘金一周7.10
前端·人工智能·mcp
Data_Adventure8 分钟前
推荐几款开源 Canvas 和 WebGL 图形库
前端·webgl·canvas
我爱加班、、22 分钟前
element-plus表单校验失败问题
前端·javascript·vue.js·elementui·ecmascript
香香甜甜的辣椒炒肉27 分钟前
vue快速上手
前端·javascript·vue.js
大菠萝学姐29 分钟前
基于Spring Boot和Vue的高校图书馆座位预约系统的设计与实现
java·vue.js·spring boot·后端·python·mysql·vue
b1gbrother1 小时前
让你的Claude Code变得更聪明
前端·程序员
国家不保护废物1 小时前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
用户2519162427111 小时前
Canvas之概述,画布与画笔
前端·javascript·canvas
南方kenny1 小时前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试