Javascript 在移动设备上为移动导航和背景色设置动画，无延迟

从运行的代码中可以看出；页面滚动条上的导航栏固定在顶部，将其徽标更改为蓝色，并具有白色背景。 在移动设备上，菜单应向下滑动或平滑显示，在移动屏幕上的内容顶部不会出现任何延迟

在移动设备上，我一直在努力无缝地设置移动菜单向下滑动和背景颜色的动画，而不会出现任何延迟。我已尝试

max height

设置导航栏的高度。我所尝试的一切都导致了我测试过的所有移动设备的延迟

老实说，我已经两天没能做到这一点了。我用尽了所有的方法，现在我很沮丧。我不知道为什么它在台式机上运行平稳，但在移动设备上却严重滞后

我能做什么

const logo=document.getElementById（“pageLogo”）；
常量pageBurgerIcon=document.getElementById（“pageBurgerIcon”）；
const pageCloseMenu=document.getElementById（“pageCloseMenu”）；
const pageMainNav=document.getElementById（“pageMainNav”）；
const fixedNavbar=document.querySelector（“页面导航”）；
document.addEventListener（'scroll'，（）=>{
如果（document.body.scrollTop>0 | | document.documentElement.scrollTop>0）{
fixedNavbar.classList.add（'scrolled'）；
pageBurgerIcon.classList.add（“活动”）；
logo.src=”https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}否则{
fixedNavbar.classList.remove（'scrolled'）；
pageBurgerIcon.classList.remove（“活动”）；
如果（！pageMainNav.classList.contains（“opened”））{
if（logo.classList.contains（“logo白色”））{
logo.src=”https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
}否则{
logo.src=”https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
}
}
})
pageBurgerIcon.addEventListener（“单击”，（）=>{
pageMainNav.classList.add（“打开”）；
pageBurgerIcon.classList.remove（“show”）；
pageCloseMenu.classList.add（“显示”）；
logo.src=”https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
document.body.style.overflow=“隐藏”；
})
pageCloseMenu.addEventListener（“单击”，（）=>{
pageMainNav.classList.remove（“打开”）；
pageBurgerIcon.classList.add（“显示”）；
pageCloseMenu.classList.remove（“显示”）；
document.body.style.overflow=“”；
if（logo.classList.contains（“logo白色”））{
如果（！fixedNavbar.classList.contains（“滚动”））{
logo.src=”https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
}否则{
logo.src=”https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
}否则{
logo.src=”https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
})

*，
*：：之前，
*：：之后{
保证金：0；
填充：0；
}
html{
框大小：边框框；
字体大小：62.5%；
}
身体{
框大小：继承；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
溢出x：隐藏；
字体系列：无衬线；
字体大小：1.8rem；
线高：2.5雷姆；
颜色：#12213c；
}
/*页面容器，使其在所有屏幕上居中*/
.集装箱{
最大宽度：1400px；
保证金：0自动；
位置：相对位置；
}
/*标题样式*/
.页眉{
位置：相对位置；
背景色：#00aeef；
}
/*导航栏容器样式*/
.页面导航{
位置：固定！重要；
排名：0；
左：0；
z指数：10000！重要；
宽度：100%；
过渡：均为0.2s；
}
/*导航栏样式*/
.第页导航{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
最大宽度：1400px；
保证金：0自动；
填充：2rem0 5rem0；
}
/*标志*/
.page__徽标{
左：6rem；
}
.page__徽标-img{
宽度：30px；
高度：30px；
}
/*导航栏菜单列表*/
.页面菜单{
右：6rem；
}
.页面\菜单图标{
显示：无；
填充：#fff；
}
.page\u菜单-icon.blue{
填写：#0066a1；
}
.第页菜单a{
文字装饰：无；
光标：指针；
字体大小：粗体；
字体大小：16px；
线高：22px；
字母间距：0.03em；
颜色：#0066a1；
}
.第页菜单a.激活{
颜色：#3ab449！重要；
}
.page_uu菜单a:非（：类型的第一个）{
左：4rem；
}
/*滚动设置上的导航容器*/
.page\u导航。已滚动{
高度：80px；
背景：#fff！重要；
盒影：0 10px 10px rgba（0,0,0,0.08）；
}
/*导航栏的滚动样式，导航栏是导航容器的直接子项*/
.page\uu navigation.scrolled>nav.page\uu nav{
垫面：2.5rem；
}
.page\uuu navigation.scrolled>nav.page\uu nav.page\uuu菜单图标{
垫面：5px；
}
.page_uunavigation.scrolled>nav.page_unav.page_uu菜单a{
颜色：#0066a1；
}
.page_uuNavigation.scrolled>nav.page_uNavigation.page_uu菜单a.active{
颜色：#3ab449；
}
/*页面内容部分*/
.page_uu简介p{
边缘底部：20px；
}
/*页面内容填充空间*/
.页面顶部填充{
填充：20rem 6rem 11.5rem 6rem；
}
/*屏幕小于或等于600px的移动设备的媒体查询*/
@仅介质屏幕和（最大宽度：600px）{
身体{
字体大小：1.4rem；
线高：1.9雷姆；
}
/*导航栏集装箱*/
.页面导航{
位置：相对位置；
显示：块；
保证金：0自动；
宽度：100%；
溢出：隐藏；
}
/*导航栏样式*/
.第页导航{
位置：固定！重要；
填充：0；
显示：块；
排名：0；
左：0；
高度：80px；
宽度：100%；
溢出：隐藏；
-webkit过渡：所有0.2秒都可以轻松过渡；
过渡：所有0.2秒缓解；
z指数：10000；
}
/*导航栏打开时*/
.页面导航已打开{
身高：80%；
背景：白色！重要；
盒影：0px 5px 10px rgba（0,0,0,0.05）；
边界半径：0 0 32px 32px；
-webkit过渡：所有0.2s易用性；
/* Navigation Container on scroll settings */
.page__navigation.scrolled {
  height: 80px;
  background: #fff !important;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.08);
}

/* On scroll styling for the navbar which is a direct child of the navigation container */
.page__navigation.scrolled > nav.page__nav {
  padding-top: 2.5rem;
}

.page__navigation.scrolled > nav.page__nav .page__menu-icon {
  padding-top: 5px;
}