湛江网站建设咨询,直播开放平台登陆,百度搜索热词查询,软件技术培训机构目的#xff1a;浏览器上下滚动时#xff0c;若距离顶部的滚动距离大于78px#xff0c;吸顶导航显示#xff0c;小于78px隐藏。使用vueuse插件中的useScroll方法和动态类名控制进行实现
1. 安装
npm i vueuse/core
2. 获得滚动距离
项目中导入#xff0…目的浏览器上下滚动时若距离顶部的滚动距离大于78px吸顶导航显示小于78px隐藏。使用vueuse插件中的useScroll方法和动态类名控制进行实现
1. 安装
npm i vueuse/core
2. 获得滚动距离
项目中导入解构出
import { useScroll } from vueuse/coreconst { y } useScroll(window) //函数中 是基于什么对象进行滚动本次 基于window进行滚动
3. 以 滚动距离 做判断条件 进行控制组件盒子的显示与隐藏
div classapp-header-sticky :class{show: y 78}
useScroll方法的其他参数 参考useScroll | VueUse中文文档 (vueusejs.com)
