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

news2025/4/10 18:03:34

目的:浏览器上下滚动时,若距离顶部的滚动距离大于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.coloradmin.cn/o/999270.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深度学习在医疗保健领域的应用:从图像识别到疾病预测

文章目录 深度学习在医学影像识别中的应用1. 癌症检测2. 病理学图像分析3. 医学图像分割 深度学习在疾病预测中的应用1. 疾病风险预测2. 疾病诊断辅助3. 药物研发 深度学习在个性化治疗中的应用1. 基因组学分析2. 临床数据集成 深度学习在医疗保健中的挑战和未来数据隐私和安全…

C语言经典100例题(55)--从一个整数a中把从右端开始的4-7位取出来

目录 题目 问题分析 右移操作符 左移操作符 方法一 方法二 运行结果 题目 用c语言从一个整数a中把从右端开始的4-7位取出来 问题分析 右移操作符 右移操作符是一种位运算符&#xff0c;用于将二进制数向右移动指定的位数。它通常用符号" >> "表示…

【哈士奇赠书活动 - 36期】- 〖Django Web 开发实例精解〗

文章目录 ⭐️ 赠书 - 《Django Web开发实例精解》⭐️ 内容简介⭐️ 作者简介⭐️ 编辑推荐⭐️ 赠书活动 → 获奖名单 ⭐️ 赠书 - 《Django Web开发实例精解》 ⭐️ 内容简介 《Django Web开发实例精解》详细阐述了与Django相关的基本解决方案&#xff0c;主要包括模型和数据…

期权赚的钱从哪儿来的?期权怎么盈利?

期权盈利通过买入期权获利&#xff0c;和卖出期权获利&#xff0c;2种方式&#xff0c;简单理解就是做期权买方和卖方来盈利和赚钱&#xff0c;下文为大家揭秘期权赚的钱从哪儿来的&#xff1f;期权怎么盈利&#xff1f;本文来自&#xff1a;期权酱 一、买入期权利润计算。 1、…

AUTOSEMO“恒以致远,共创共赢”主题研讨会圆满落幕

2023年8月31日&#xff0c;中国汽车工业协会软件分会中国汽车基础软件生态标委会&#xff08;简称&#xff1a;AUTOSEMO&#xff09;与天津市西青区人民政府联合主办&#xff0c;北京经纬恒润科技股份有限公司承办的“恒以致远&#xff0c;共创共赢”主题研讨会在天津隆重召开。…

【Python爬虫实战】爬虫封你ip就不会了?ip代理池安排上

前言 在进行网络爬取时&#xff0c;使用代理是经常遇到的问题。由于某些网站的限制&#xff0c;我们可能会被封禁或者频繁访问时会遇到访问速度变慢等问题。因此&#xff0c;我们需要使用代理池来避免这些问题。本文将为大家介绍如何使用IP代理池进行爬虫&#xff0c;并带有代…

第二章:CompletableFuture

Future接口理论知识复习 Future接口&#xff08;FutureTask实现类&#xff09;定义了操作异步任务执行一些方法&#xff0c;如获取异步任务的执行结果、取消任务的执行、判断任务是否被取消、判断任务执行是否完毕等。 比如主线程让一个子线程去执行任务&#xff0c;子线程可能…

JBoss 5.x/6.x 反序列化漏洞复现(CVE-2017-12149)

一、漏洞说明 该漏洞存在于http invoker组件的ReadOnlyAccessFilter的doFilter中&#xff0c;在/invoker/readonly请求中&#xff0c;服务器将用户提交的POST内容进行了Java反序列化 二、搭建环境 cd vulhub/jboss/CVE-2017-12149 docker-compose up -d 三、漏洞验证 访问:80…

海南热带海洋学院金秋悦读《乡村振兴战略下传统村落文化旅游设计》2023新学年许少辉八一新书​

海南热带海洋学院金秋悦读《乡村振兴战略下传统村落文化旅游设计》2023新学年许少辉八一新书​

最新在线IDE流行度最新排名(每月更新)

2023年09月在线IDE流行度最新排名 TOP 在线IDE排名是通过分析在线ide名称在谷歌上被搜索的频率而创建的 在线IDE被搜索的次数越多&#xff0c;人们就会认为它越受欢迎。原始数据来自谷歌Trends 如果您相信集体智慧&#xff0c;那么TOP ODE索引可以帮助您决定在软件开发项目中…

Win10 ping 虚拟机kali 请求超时解决办法

出现这种问题应该是windows休眠导致的 这里我的解决方法是先禁用再启用连接 然后再ping 虚拟机ip和kali ip&#xff0c;发现就可以连上了

zookeeper没有.log日志,只有.out日志

zookeeper没有.log日志&#xff0c;只有.out日志 背景&#xff1a;发现zookeeper没有.log日志&#xff0c;只有.out日志 发现在logs目录下&#xff0c;只有.out文件&#xff0c;且每次重启zk&#xff0c;.out日志都会被覆盖写 为了有完整的log日志&#xff0c;需要如下参数 1…

2023上半年京东运动鞋服市场数据分析(京东数据运营)

大众线下运动生活恢复&#xff0c;掀起新一轮户外潮流&#xff0c;运动热潮迭起。由此产生的运动鞋服及专业装备需求&#xff0c;为运动品牌们带来了诸多增长机会。近日各大运动品牌陆续发布上半年财报&#xff0c;回答了品牌对复苏机遇、发展挑战的应对情况。接下来结合具体数…

LDR6020 USB PD3.1的 3组6通道CC控制SOC芯片介绍和运用

随着USB-IF 协会发布了全新的USB PD3.1规范&#xff0c;该规范将快充功率上限从100 W提升至240 W&#xff0c;充电功率的提升也让USB PD的应用领域更加广泛。 USB PD在手机、笔记本电脑&#xff0c;扩展到便携式设备、物联网设备、智能家居、通信和安防设备、汽车和医疗等领域…

SpringMVC文件的上传下载JRebel的使用

目录 前言 一、JRebel的使用 1.IDea内安装插件 2.激活 3.离线使用 使用JRebel的优势 二、文件上传与下载 1 .导入pom依赖 2.配置文件上传解析器 3.数据表 4.配置文件 5.前端jsp页面 6.controller层 7.测试结果 前言 当涉及到Web应用程序的开发时&…

IE浏览器打开变成别的浏览器怎么办

最近很多朋友发现自己的IE浏览器打开时会自动跳转到别的浏览器上去&#xff0c;又不知道怎么恢复回来。所以今天小编就来告诉大家解决的方法&#xff0c;下面就是详细的教程&#xff0c;想知道的快来看看吧。 IE浏览器打开变成别的浏览器解决方法 方法一 1、打开的浏览器中找…

DataTables.js综合应用开发(ajax筛选查询、同列数据汇总、环比数据)

筛选数据 <!--筛选数据--><div class"layui-card" style"margin-bottom: 50px;"><div class"layui-row"><form class"layui-form layui-col-md12" style"margin: 10px;"><div class"demoTa…

百望云蝉联2023「Cloud 100 China 」榜单 综合实力再获认可

9月7日&#xff0c;2023 Cloud 100 China 榜单于上海中心正式发布&#xff0c;榜单由靖亚资本与崔牛会联合推出&#xff0c;百望云凭借着过硬的综合实力与卓越的技术创新能力&#xff0c;再次荣登榜单&#xff0c;位居第六位。 本届评选&#xff0c;Top 100 企业的数据指标的权…

EMC滤波器对DC电源模块影响有多大?

BOSHIDA EMC滤波器对DC电源模块影响有多大&#xff1f; 随着电子设备的广泛应用&#xff0c;EMC&#xff08;电磁兼容性&#xff09;问题越来越受到关注。而EMC滤波器作为一种常见的电路器件&#xff0c;其作用在于抑制电源的干扰和防止外界干扰的影响。在DC电源模块的设计中&…

直击永悦科技半年报:双轮驱动下的“增长曲线”

詹姆斯卡斯的著作《有限与无限的游戏》中&#xff0c;传递出这样一种观点&#xff1a; “有限的游戏&#xff0c;其目的在于赢得胜利&#xff1b;无限的游戏&#xff0c;却旨在让游戏永远进行下去。有限的游戏在边界内玩&#xff0c;无限的游戏玩的就是边界。” 企业要实现持…