vue3中的吸顶导航交互实现 | VueUse插件

目的:浏览器上下滚动时,若距离顶部的滚动距离大于78px,吸顶导航显示,小于78px隐藏。使用vueuse插件中的useScroll方法​​​​​​​动态类名控制进行实现

1. 安装

npm i @vueuse/core

2. 获得滚动距离

项目中导入,解构出

import { useScroll } from '@vueuse/core'const { y } = useScroll(window)    //函数中 是基于什么对象进行滚动,本次 基于window进行滚动

3. 以 滚动距离 做判断条件 进行控制组件盒子的显示与隐藏

<div class="app-header-sticky" :class="{show: y > 78}">

useScroll方法的其他参数:

参考:useScroll | VueUse中文文档 (vueusejs.com)

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

财富潮涌:银行发展绿色经济创新路径

在《玩转金融新“绿”潮&#xff0c;银行纷纷亮大招》内容中&#xff0c;我们带大家了解了商业银行有关绿色信贷产品、绿色债券产品及绿色投资的内容。今天&#xff0c;我们将继续带大家了解商业银行绿色金融实践路径中关于绿色财富、绿色服务和绿色运营的分析。 在绿色金融实…

文件路径中的/,\的区别和文件路径的常见用法

/是Unix和类Unix系统上的路径分隔符.现代Windows通常可以同时使用\和/交换文件路径,但微软\几十年来一直主张使用路径分隔符. 关于文件路径的常用方法再学习一下&#xff1a; "./"&#xff1a;代表目前所在的目录 "../"&#xff1a;代表上一层目录 以&q…

线性代数的本质(一)——向量空间

文章目录 向量空间向量及其性质基与维数向量的坐标运算 《线性代数的本质》 - 3blue1brown 高中数学A版选修4-2 矩阵与变换 《线性代数及其应用》(第五版) 《高等代数简明教程》- 蓝以中 向量空间 In the beginning Grant created the space. And Grant said, Let there be vec…

Rn视图生成图片并保存到相册

该功能依赖两个组件 完整代码 yarn add react-native-view-shot // 视图生成图片 yarn add expo-media-library // 保存图片import { useState, useRef } from react import ViewShot from "react-native-view-shot" import { View, Text, Button, Image, StyleSh…

pdf文档怎么压缩小一点?文件方法在这里

在日常工作和生活中&#xff0c;我们经常会遇到需要上传或者发送pdf文档的情况。但是&#xff0c;有时候pdf文档的大小超出了限制&#xff0c;需要我们对其进行压缩。那么&#xff0c;如何将pdf文档压缩得更小一点呢&#xff1f;下面&#xff0c;我将介绍三种方法&#xff0c;让…

堆与栈的区别

OVERVIEW 栈与堆的区别一、程序内存分区中的堆与栈1.栈2.堆3.堆&栈 二、数据结构中的堆与栈1.栈2.堆 三、堆的深入1.堆插入2.堆删除&#xff1a;3.堆建立&#xff1a;4.堆排序&#xff1a;5.堆实现优先队列&#xff1a;6.堆与栈的相关练习 栈与堆的区别 自整理&#xff0c;…

【Cocos Creator 3.5实现赛车游戏】10.实现汽车节点的运动逻辑

转载知识星球 | 深度连接铁杆粉丝&#xff0c;运营高品质社群&#xff0c;知识变现的工具 项目地址&#xff1a;赛车小游戏-基于Cocos Creator 3.5版本实现: 课程的源码&#xff0c;基于Cocos Creator 3.5版本实现 上一节的学习后&#xff0c;您已经完成了对汽车节点的控制逻…

【自动驾驶】PETR 环境安装与测试

1.环境安装 该工程依赖MMCV&#xff0c; MMDetection&#xff0c; MMDetection3d&#xff0c;MMSegmentation Install MMCV pip install mmcv-full -f https://download.openmmlab.com/mmcv/dist/{cu_version}/{torch_version}/index.htmlexamples&#xff1a; pip install…

小程序实现一个 倒计时组件

小程序实现一个 倒计时组件 需求背景 要做一个倒计时&#xff0c;可能是天级别&#xff0c;也可能是日级别&#xff0c;时级别&#xff0c;而且每个有效订单都要用&#xff0c;就做成组件了 效果图 需求分析 需要一个未来的时间戳&#xff0c;或者在服务度直接下发一个未来…

【视觉SLAM入门】7.3.后端优化 基于KF/EKF和基于BA图优化的后端,推导及举例分析

"时间倾诉我的故事" 1. 理论推导2. 主流解法3. 用EKF估计状态3.1. 基于EKF代表解法的感悟 4. 用BA法估计状态4.1 构建最小二乘问题4.2 求解BA推导4.3 H的稀疏结构4.4 根据H稀疏性求解4.5 鲁棒核函数4.6 编程注意 5.总结 引入&#xff1a; 前端里程计能给出一个短时间…

MySQL优化第二篇

MySQL优化第二篇 性能分析小表驱动大表慢查询日志日志分析工具mysqldumpslow Show Profile进行SQL分析&#xff08;重中之重&#xff09; 七种JOIN 1、inner join &#xff1a;可以简写为join&#xff0c;表示的是交集&#xff0c;也就是两张表的共同数据 sql语句&#xff1a…

用动态ip登录账号的风险高不高?

使用动态ip登录账号在一定程度上提供了额外的安全保障和匿名性&#xff0c;但与此同时也存在一些风险和风控挑战。本文将解密使用动态ip登录账号的真相&#xff0c;明确安全与风险的并存之道。 1、增强隐私保护&#xff1a; 使用动态ip登录账号可以隐藏您的真实IP地址&#xff…

21 Spring Boot整合Redis

目录 一、Redis简介 二、创建springboot整合redis工程 三、添加依赖 四、配置Yml 五、创建Redis配置类 六、创建Redis工具类&#xff0c;封装Redis的api 七、操作Redis 八、验证 一、Redis简介 简单来说 Redis 就是一个使用 C 语言开发的数据库&#xff0c;不过与传统…

无涯教程-JavaScript - OR函数

描述 如果任何参数为TRUE,则OR函数返回TRUE&#xff1b;如果所有参数为FALSE,则返回FALSE。 语法 OR (logical1, [logical2], ...) 争论 Argument描述Required/Optionallogical1 您要测试的1到255个条件可以是TRUE或FALSE。 您要测试的1到255个条件可以是TRUE或FALSE。 Req…

JDK API文档地址(中文和英文)

JDK1.6 JDK 1.6 中文手册 JDK1.8 Java 8 中文版 - 在线API手册 - 码工具 Java 官方文档 |官方教程|Java 官方文档 API中文手册|Java 官方文档参考文档_w3cschool 网上还有很多百度网盘中也有 JDK17 https://doc.qzxdp.cn/jdk/17/zh/api/index.html 英文文档 所有版本 …

Unity 性能优化之Shader分析处理函数ShaderUtil.HasProceduralInstancing: 深入解析与实用案例

Unity 性能优化之Shader分析处理函数ShaderUtil.HasProceduralInstancing: 深入解析与实用案例 点击封面跳转到Unity国际版下载页面 简介 在Unity中&#xff0c;性能优化是游戏开发过程中非常重要的一环。其中&#xff0c;Shader的优化对于游戏的性能提升起着至关重要的作用。…

学习视觉SLAM需要会些什么?

前言 SLAM是现阶段很多研究生的研究方向&#xff0c;我也是作为一个即将步入视觉SLAM的研究生&#xff0c;网上对于SLAM的介绍很多&#xff0c;但很少有人完整系统的告诉你学习视觉SLAM该有那些基础&#xff0c;那么此贴将告诉你学习SLAM你要有那些方面的基础。 文章目录 前言…

Java 华为真题-选修课

需求&#xff1a; 现有两门选修课&#xff0c;每门选修课都有一部分学生选修&#xff0c;每个学生都有选修课的成绩&#xff0c;需要你找出同时选修了两门选修课的学生&#xff0c;先按照班级进行划分&#xff0c;班级编号小的先输出&#xff0c;每个班级按照两门选修课成绩和的…

计算机网络TCP篇之流量控制

计算机网络TCP篇之流量控制 今天谈一谈我对于tcp流量控制的看法 在网络拓扑中如果发送方节点的发送速率大于接受方节点的接受速率&#xff0c;数据会不断在接受方的缓冲区累积&#xff0c;直到接受方的缓冲区满的时候&#xff0c;发送方继续发送数据&#xff0c;这时候接受方无…

文件上传漏洞~操作手册

目录 上传文件一般过滤方式 客服端校验 服务端校验 黑白名单机制 常规文件上传漏洞绕过 客户端绕过 1.游览器禁用JavaScript 2.正常burp suite抓包改包 服务端绕过 1.Content-Type绕过 2.黑名单绕过 1&#xff09;命名规则绕过 2&#xff09;大小写绕过 3&#x…