vue实现滚动条下滑时隐藏导航栏,上滑时显示导航栏

效果展示

scrollhide

思路

监听滚动事件,记录上次的滚动距离,与最新滚动距离做对比,如果为正,说明滚动距离距顶值scrollTop变大,用户正在向下滚动页面,此时隐藏,反之则反,隐藏就是top值给他负导航栏的高度距离就隐藏了

步骤

css样式

.isHide{top:-76px
}

js监听

mounted() {window.addEventListener('scroll', this.scrolling)},methods: {scrolling(){// console.log(document.documentElement.scrollTop||document.body.scrollTop)// 可视窗口顶部距离文档顶部的距离let scrollTop=document.documentElement.scrollTop||document.body.scrollTop// 与上次滚动所更新的距顶值做对比,如果是小于0,说明这次对比上次的距顶小,说明用户正在往上滚动,反之则反let compareLast=scrollTop-this.lastToTopthis.lastToTop=scrollTopif (compareLast>0){this.isHide=true}else {this.isHide=false}}}

nav导航css

  position: fixed;top: 0;transition:all 0.3s ;

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

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

相关文章

【Qt和OpenCV 概述】

Qt和OpenCV(Open Source Computer Vision Library)都是广泛用于计算机视觉应用的强大工具,而将它们结合使用,可以在Qt应用程序中实现复杂的视觉处理功能。Qt是跨平台的GUI库,而OpenCV则是专为计算机视觉任务设计的库。下面是Qt和OpenCV结合使用的一些概述: 为什么结合使…

为什么需要第三方支付

1.第三方支付平台提供一系列的应用接口程序,将多种银行卡支付方式整合到一个界面上,负责交易结算中与银行的对接,使网上购物更加快捷、便利。第三方支付整合了后端各大银行的不同支付接口,对外提供统一的接入平台,方便…

【C++语言】C++11新特性(1)

一、统一的列表初始化 1.1 {} 初始化 在C98中,标准允许使用花括号{}对数组或者结构体元素进行统一的列表初始值设定。比如: struct Point {int _x;int _y; };int main() {int array1[] { 1, 2, 3, 4, 5 };int array2[5] { 0 };Point p { 1, 2 };ret…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 项目排期安排(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录,全、新、准,题目覆盖率达 95% 以上,支持题目在线…

日常学习--调用第三方接口和提供第三方接口时的注意事项--20240728

1、调用第三方接口的注意事项 接口测试与验证: 对第三方接口进行充分的测试,包括功能测试、性能测试和安全测试,确保接口的稳定性和安全性。 验证接口的可用性,包括接口地址、请求方式、请求参数、响应格式等是否正确。 参数校…

C++使用MD5对字符串加密,获取文件的MD5值(附完整源码)

目录 1、为什么要使用MD5? 2、开源MD5类 3、获取字符串MD5值的MD5String接口封装 4、获取文件MD5值的MD5File接口封装 5、最后 C++软件异常排查从入门到精通系列教程(专栏文章列表,欢迎订阅,持续更新...)https://blog.csdn.net/chenlycly/article/details/125529931C…

OSPF动态路由协议实验

首先地址划分 一个骨干网段分成三个,r1,r2,r5三个环回网段 ,总共要四个网段 192.168.1.0/24 192.168.1.0/26---骨干网段 192.168.1.0/28 192.168.1.16/28 192.168.1.32/28 备用 192.168.1.64/28 192.168.1.64/26---r1环回 192.1…

easyui 点击单元格的时候,获取该行另外一个字段的值

在 EasyUI DataGrid 中,你可以通过绑定 ​​onClickCell​​ 事件来获取点击单元格所在行的其他字段的值。以下是具体的实现步骤和示例代码: 1. 初始化 DataGrid 首先,确保你已经初始化了一个 DataGrid,并填充了一些数据。 <!DOCTYPE html> <html> <head…

【Vulnhub系列】Vulnhub_DC-1靶场渗透(原创)

【Vulnhub系列靶场】Vulnhub_DC-1靶场渗透 原文转载已经过授权 原文链接&#xff1a;Lusen的小窝 - 学无止尽&#xff0c;不进则退 (lusensec.github.io) 一、环境准备 1、在百度网盘中下载DC-1靶场。DC-1靶场受virtual box 的影响&#xff0c;在VM中直接打开是扫描不到IP 的…

C++第五次作业

题目&#xff1a; 自实现myFind()函数&#xff0c; 在某个字符串str中查找子字符串str_key的位置&#xff0c;&#xff0c;如果找到&#xff0c;返回子字符串所出现的第一个位置的下标&#xff0c;如果没找到&#xff0c;返回-1。 例如 abcdefgabcdefg (str) def (str_key) 3 q…

西方2000年文明史

西方2000年文明史 PoliticsEconomyCultureScienceMathematicsPhysicsChemistryBiologyMedicineEngineeringArtMusicComputer Science / Information Technology The contributions of Western civilization over the past 2000 years span a wide range of fields, from politi…

flutter自定义icon

从iconfont-阿里巴巴矢量图标库下载自己的选好的图标库 复制ttf文件到 fonts目录下&#xff0c;如&#xff1a;D:\dev\Android\apps\ichat\fonts\my_iconfont.ttf 在pubspec.yaml里面配置 flutter&#xff1a; fonts:- family: my_iconfonts:- asset: fonts/my_icon_font.t…

Python入门知识点 9--函数作用域与名称空间

一、练习答案 项目名称: 上一篇练习 项目描述: 练习答案 项目环境: python3.8.10 作者所属: 小赵 # 1.定义一个函数,内容为输出一句(人生苦短,我选python),并调用该函数 def talk():print(人生苦短,我选python) talk()# 2.定义一个函数,该函数在调用的时候会接收2个数值数据&am…

【Vulnhub系列】Vulnhub_SecureCode1靶场渗透(原创)

【Vulnhub系列靶场】Vulnhub_SecureCode1靶场渗透 原文转载已经过授权 原文链接&#xff1a;Lusen的小窝 - 学无止尽&#xff0c;不进则退 (lusensec.github.io) 一、环境配置 1、从百度网盘下载对应靶机的.ova镜像 2、在VM中选择【打开】该.ova 3、选择存储路径&#xff0…

Mathtype7.8中文版远程安装并嵌入word(包成功)

Mathtype7.8是一款专业的数学公式编辑工具&#xff0c;能够帮助用户在各种文档中插入复杂的数学公式和符号。数学公式编辑器工具可以轻松输入各种复杂的公式和符号&#xff0c;与Office文档完美结合&#xff0c;显示效果超好&#xff0c;比Office自带的公式编辑器要强大很多。M…

obsidian 首页制作 辅助笔记总结回顾

记笔记最重要的是回顾与总结&#xff0c;有这么一款插件可以让我们自己搭建一个美观的首页&#xff0c;它包括热力图、文稿统计、文稿回顾等等功能&#xff0c;你是否愿意尝试呢&#xff1f; 今天就介绍一款插件&#xff0c;能快速制作笔记首页&#xff0c;辅助总结、回顾。 …

深入浅出搞懂 Apache CXF 框架

Web服务是系统与系统之间通信的重要方式。本文将结合Apache CXF和Spring&#xff0c;详细讲解如何创建和配置Web服务&#xff0c;并给出具体的示例&#xff0c;帮助读者快速上手。 什么是Web服务&#xff1f; Web服务是一种允许不同应用程序通过网络进行互操作的技术&#xff…

sql注入详解【从数据库架构分析】

简介 SQL注入是一种常见的Web应用程序安全漏洞&#xff0c;它允许攻击者在Web应用程序中插入恶意SQL语句&#xff0c;从而操纵数据库执行非授权的操作。这种攻击利用了应用程序在处理用户输入时的不足&#xff0c;特别是当应用程序直接将用户输入作为SQL语句的一部分使用&…

Flutter Screenshot使用指南:轻松捕获Widget为图片

Flutter Screenshot使用指南&#xff1a;轻松捕获Widget为图片 简介 screenshot 是一个Flutter插件&#xff0c;它提供了一个简单的方法来捕获任何Widget为图片&#xff0c;包括那些未渲染在屏幕上的Widget。 主要功能 捕获屏幕上的Widget为图片。支持捕获不可见的Widget&a…