Javascript 向上滚动时到导航栏的过渡时间

我有这个测试页面。 我添加了一些JS，使导航栏在上下滚动的基础上隐藏和显示，这很好，一切正常，除了： 当我向下滚动时，导航栏出现，它有

transition:all 3s（我将其设置为3秒，因此很明显），但当我向下滚动时，导航栏消失，过渡时间不适用

注意：我注意到向下滚动时，我给导航栏的过渡时间越长，向上滚动时，过渡时间就越长，但仅成比例：

示例：如果我给出导航条
转换：全部3当它消失时会有大约.5秒的过渡，如果我给它
过渡：全部6秒当它消失时，将有大约1秒的转换。所以如果我想设置一个合理的转换时间，比如
transion:1s或
转换：.5s，当我向上滚动时，导航栏的转换将立即显示

我能做什么


let-toggleButton=document.getElementById（'burger'））
让navBarLinks=document.getElementById（'nav1'））
toggleButton.addEventListener（'单击'，（）=>{
navBarLinks.classList.toggle（'active'）
})
const nav=document.querySelector（'header'）；
让prevScrollpos=window.pageYOffset；
window.addEventListener（'scroll'，（）=>{
让currentScrollpos=window.pageYOffset；
如果（prevScrollpos

*{
保证金：0；
填充：0；
框大小：边框框；
文字装饰：无；
列表样式：无；
}
：根{
字体大小：15px；
}
/*   ↓ ↓ ↓   */
标题{
溢出x：隐藏；
过渡：所有3s；
转化：translateY（0%）；
位置：固定；
z指数：5；
}
.事情{
位置：相对位置；
顶部：64px；
}
header.hide{
转换：translateY（-100%）；
}
/*   ↑ ↑ ↑   */
.洛根汉堡包{
显示器：flex；
宽度：100vw；
证明内容：之间的空间；
对齐项目：居中；
背景：线性梯度（45度，浅粉色，粉蓝色）；
填充物：1em 1.5em；
位置：相对位置；
z指数：2；
}
.汉堡{
位置：绝对位置；
左：85%；
}
.泡泡{
位置：相对位置；
顶部：-8px；
左：-20px；
显示：无；
}
@关键帧起泡{
从{
变换：缩放（.5）；
不透明度：0；
}
到{
转换：比例（1.9）；
不透明度：1；
}
}
.汉堡：活跃的~.泡泡{
显示：块；
动画：气泡。2s线性；
}
.导航1{
背景：线性梯度（45度，粉蓝色，浅粉色）；
文本对齐：居中；
转化：translatex（100%）translateY（-110%）；
过渡：.5s；
}
.nav1.active{
转化：translatex（0%）translatey（0%）；
}
保险商实验室{
线高：2.5em；
填充：1em 0；
}
a{
颜色：黑色；
字体系列：verdana；
字号：1.2rem；
}

标志






Lorem ipsum dolor sit amet，奉献精英。在《动物宣言》中，有一种选择，它是一种以软体动物、建筑设计师、代表、eos为别名的自我排斥的选择。补血草，罪魁祸首，多洛雷斯·德莱克特斯·沃卢帕斯·奥里根蒂（dolores deletus voluptas officia eligendi）！ipsum dolor sit amet，为精英献身。在《动物宣言》中，有一种选择，它是一种以软体动物、建筑设计师、代表、eos为别名的自我排斥的选择。补血草，罪魁祸首，同功受难者，圣贤。在《动物宣言》中，有一种选择，它是一种以软体动物、建筑设计师、代表、eos为别名的自我排斥的选择。积存的布兰迪提斯、库帕、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯。补血草，罪魁祸首，多洛雷斯·德莱克特斯·沃卢帕斯·奥里根蒂（dolores deletus voluptas officia eligendi）！ipsum dolor sit amet，为精英献身。在《动物宣言》中，有一种选择，它是一种以软体动物、建筑设计师、代表、eos为别名的自我排斥的选择。补血草，罪魁祸首，同功受难者，圣贤。在《动物宣言》中，有一种选择，它是一种以软体动物、建筑设计师、代表、eos为别名的自我排斥的选择。补血草、补血草、补血草、补血草、补血草。在《动物宣言》中，有一种选择，它是一种以软体动物、建筑设计师、代表、eos为别名的自我排斥的选择。补血草，罪魁祸首，多洛雷斯·德莱克特斯·沃卢帕斯·奥里根蒂（dolores deletus voluptas officia eligendi）！ipsum dolor sit amet，为精英献身。在《动物宣言》中，有一种选择，它是一种以软体动物、建筑设计师、代表、eos为别名的自我排斥的选择。补血草，罪魁祸首，同功受难者，圣贤。在《动物宣言》中，有一种选择，它是一种以软体动物、建筑设计师、代表、eos为别名的自我排斥的选择。积存的布兰迪提斯、库帕、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯、德洛雷斯。补血草，罪魁祸首，多洛雷斯·德莱克特斯·沃卢帕斯·奥里根蒂（dolores deletus voluptas officia eligendi）！ipsum dolor sit amet，为精英献身。在《动物宣言》中，有一种选择，它是一种以软体动物、建筑设计师、代表、eos为别名的自我排斥的选择。补血草，罪魁祸首，同功受难者，圣贤。在《动物宣言》中，选择权指的是对自己的选择权，即对他人的选择权、对他人的选择权、对他人的选择权、对他人的选择权、对他人的选择权、对他人的选择权、对他人的选择权、对他人的选择权
transition: all 0.6s linear;

header {
  overflow-x: hidden;
  transition: all 1s;
  transform: translateY(-200px);
  position: fixed;
  z-index: 5;
}