vue中监听页面滚动位置

vue中监听页面滚动位置

  • 问题描述
  • 实现代码
    • 1. 获取页面被卷起的高度
    • 2. 监听滚动事件


问题描述

页面滚动到指定位置时,展示侧边栏导航。


实现代码

1. 获取页面被卷起的高度

使用 e.target.scrollTop可以获取到页面向上滚动了多少像素,代码如下:

showSideNav(e) {if (!!e.target.scrollTop && e.target.scrollTop > 700) {this.isSideNavShow = true;} else {this.isSideNavShow = false;}
},

2. 监听滚动事件

在生命周期监听和移除滚动事件,代码如下:

mounted() {window.addEventListener('scroll', this.showSideNav, true);
},
beforeDestroy() {window.removeEventListener('scroll', this.showSideNav, true);
},

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

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

相关文章

docker:compose

docker三剑客:compose、swarm、machinemachine是在不同环境(不同的操作系统平台上安装)下部署docker的compose是做容器编排的swarm是做docker集群管理的Compose 简介口任务( task ) : 一个容器被称为一个任…

GaussDB 数据库架构师修炼(十八) SQL引擎-计划管理-SQL PATCH

1 业务背景GaussDB的优化器生成计划不优的情况下,对DBA调优过程中不对业务sql修改场景下,提供3种计划管理,分别为plan hint,sql patch,spm。2 sql patch的使用场景在发现查询语句的执行计划、执行方式未达预期的场景下,可以通过创…

函数式编程从入门到精通

1.概述1.1为什么学&#xff1f;* 能够看懂公司里的代码 * 大数量下处理集合效率高 * 代码可读性高 * 消灭嵌套地狱//查询未成年作家评分在70分以上的书籍&#xff0c;由于流的影响所以作家和书籍可能会重复出现&#xff0c;所以要去重public void test1() {List<Book> bo…

Overleaf 中文报错和中文不显示问题的解决方案

Overleaf是一个很方便的在线latex编辑工具。但在最初使用Overleaf的时候&#xff0c;是不是有很多小伙伴会遇到模板中中文报错或者中文不显示的问题呢&#xff1f; 本文将带你一步步解决这个问题~ 中文报错 在点击重新编译按钮后&#xff0c;中文报错问题一般会有如下图红框显示…

前后端联调场景以及可能会遇到的问题

一、异地和在一起办公的方式 首先&#xff0c;在一起办公&#xff08;同局域网&#xff09;的情况&#xff0c;最常用的应该是直接使用后端的局域网 IP 进行联调&#xff0c;因为同一网络内设备可以直接通信。步骤方面&#xff0c;需要后端提供 IP 和端口&#xff0c;前端配置…

【T113自制板卡】1 - 原理图说明

文章目录1、前言2、板卡资源总览3、电源3.1、板卡供电3.2、电源方案4、OTG接口5、调试串口6、用户LED7、FLASH8、按键9、BLE MESH10、Wi-Fi11、MIC12、喇叭接口13、MIPI接口1、前言 这几天跟着小智学长的课程画了一块t113的板子。本文将描述该板卡的硬件说明。 2、板卡资源总…

WiFi有网络但是电脑连不上网是怎么回事?该怎么解决?

有时候&#xff0c;咱们用电脑上网&#xff0c;打开WiFi一看&#xff0c;信号满格&#xff0c;状态栏显示已连接&#xff0c;本来想着可以愉快地看个番、查个资料、玩个游戏了&#xff0c;结果一打开浏览器&#xff0c;直接完犊子了&#xff0c;网页都打不开。这时候再看状态&a…

【golang】制作linux环境+golang的Dockerfile | 如何下载golang镜像源

一、关于如何下载docker images 这里需要大家自行科学上网如果没有话&#xff0c;下面可以使用我自行打包的golang 的docker images 注意科学上网要开启TUN模式二、golang镜像源 1、阿里云公开镜像 如果找不到golang包的小伙伴可以使用我的公开阿里镜像docker pull registry.cn…

Day58 Java面向对象13 instanceof 和 类型转换

Day58 Java面向对象13 instanceof 和 类型转换 1.instanceof关键字 instanceof关键字的作用是判断一个对象是否是某个类或其子类的实例,它返回一个布尔值true/false dog1 instanceof Dog; //返回true dog1 instanceof Animals; //返回true dog1 instanceof Object; //返回…

GEO优化案例:如何通过“知识图谱+权威信号”提升品牌AI信任度

引言&#xff1a; “在AI日益成为用户信息入口的今天&#xff0c;品牌信息能否被AI赋予‘权威’标签&#xff0c;直接决定了其在搜索结果中的可见度和用户采信度。移山科技正是这方面的专家。” 一、行业趋势概览&#xff1a;AI时代的品牌信任与GEO的价值 2025年&#xff0c…

让数据可视化更简单:Embedding Atlas使用指南

Embedding Atlas&#xff1a;交互式的嵌入可视化工具 在大数据时代&#xff0c;如何有效地理解和利用高维数据变得愈发重要。Embedding Atlas 是一款致力于提供大型嵌入&#xff08;embeddings&#xff09;交互式可视化的工具&#xff0c;允许用户对嵌入数据进行可视化、交叉过…

复杂场景鲁棒性突破!陌讯自适应融合算法在厂区越界检测的实战优化​

一、行业痛点&#xff1a;越界检测的复杂场景挑战 工业厂区周界安防中&#xff0c;越界检测极易受环境干扰。据《2024工业智能安防白皮书》统计&#xff08;注1&#xff09;&#xff0c;强逆光、雨雾天气导致传统算法误报率超35%&#xff0c;而密集设备遮挡造成的漏检率高达28…

Huggingface入门实践 Audio-NLP 语音-文字模型调用(一)

吴恩达LLM-Huggingface_哔哩哔哩_bilibili 目录 0. huggingface 根据需求寻找开源模型 1. Whisper模型 语音识别任务 2. blenderbot 聊天机器人 3. 文本翻译模型translator 4. BART 模型摘要器&#xff08;summarizer&#xff09; 5. sentence-transformers 句子相似度 …

Python-Pandas GroupBy 进阶与透视表学习

​​一、数据分组&#xff08;GroupBy&#xff09;​​​​核心概念​​&#xff1a;将数据按指定字段分组&#xff0c;对每组进行聚合、转换或过滤操作。​​1. 分组聚合&#xff08;Aggregation&#xff09;​​将分组数据聚合成单个值&#xff08;如平均值、总和&#xff09…

MQTT 核心概念与协议演进全景解读(二)

MQTT 在物联网中的应用实例智能家居中的设备联动在智能家居系统里&#xff0c;MQTT 协议扮演着至关重要的角色&#xff0c;是实现设备间高效通信与智能联动的核心枢纽。以常见的智能家居场景为例&#xff0c;当清晨的阳光缓缓升起&#xff0c;光线传感器检测到光照强度的变化&a…

燧原科技招大模型训练算法工程师

高级大模型训练算法工程师&#xff08;岗位信息已经经过jobleap.cn授权&#xff0c;可在csdn发布&#xff09;燧原科技 上海职位描述负责大模型在AI芯片预训练和微调等研发和客户支持工作&#xff1b; 参与大模型训练精度分析和性能调优&#xff1b;职位要求985/211大学计算机…

基于Java虚拟线程的高并发作业执行框架设计与性能优化实践指南

基于Java虚拟线程的高并发作业执行框架设计与性能优化实践指南 一、技术背景与应用场景 在分布式系统和微服务架构中&#xff0c;后端常需承载海量异步作业&#xff08;如批量数据处理、定时任务、异步消息消费等&#xff09;&#xff0c;对作业执行框架提出了高并发、高吞吐、…

了解 PostgreSQL 的 MVCC 可见性基本检查规则

1. 引言 根据 Vadim Mikheev 的说法&#xff0c;PostgreSQL 的多版本并发控制&#xff08;MVCC&#xff09;是一种“在多用户环境中提高数据库性能的高级技术”。该技术要求系统中存在同一数据元组的多个“版本”&#xff0c;这些版本由不同时间段内获取的快照进行管理。换句话…

普通烘箱 vs 铠德科技防静电烘箱:深度对比与选择指南

在电子制造、化工、航空航天等精密工业领域&#xff0c;烘箱作为关键工艺设备&#xff0c;其性能直接关系到产品可靠性和生产安全。普通烘箱与防静电烘箱的核心差异在于静电防护能力&#xff0c;而铠德科技作为防静电烘箱领域的专业厂商&#xff0c;其产品通过技术创新重新定义…

达梦数据库巡检常用SQL(一)

达梦数据库巡检常用SQL(一) 数据库基本信息 数据库用户信息 数据库对象检查 数据库基本信息 检查授权信息: SELECT /*+DMDB_CHECK_FLAG*/ LIC_VERSION AS "许可证版本" ,SERIES_NO AS "序列号" ,CHECK_CODE AS "校验码" …