Javascript 如何使第二个导航栏菜单正确工作？

你好，我的网站，我想第二个白色菜单栏移动到顶部中间，并停留在顶部时，我开始向下滚动。我遵循了一个关于如何做到这一点的教程，但出于某种原因，它移到了最左边，并没有完全展开。（出于测试目的，使导航栏变为红色。）

我对javascript非常陌生，所以请对我放轻松。：）

这是我正在做的网站。

const nav=document.querySelector（'.header-menu_-wrap'）；
常数topOfNav=导航偏移；
函数fixNav（）{
如果（window.scrollY>=topOfNav）{
document.body.style.paddingTop=nav.offsetHeight+'px'；
document.body.classList.add（'fixed-nav'）；
}否则{
document.body.style.paddingTop=0；
document.body.classList.remove（'fixed-nav'）；
}
}
window.addEventListener（'scroll'，fixNav）；
//135 140

。修复导航标题-菜单\u包装。标题-容器\u包装{
位置：固定；
盒影：0 5pxRGBA（0,0,0,0.1）；
背景：红色；
}

在您提供的页面中有两个问题：首先，如果您将页面的一部分解耦，通常，留下一些东西来保持高度是个好主意。其次，z-索引存在一个问题。最后，在收到onready/onload事件时读取元素坐标是一个好主意，而不是在之前，因为页面布局可能会更改或不可访问，我将讨论：

const nav = document.querySelector('.header-menu_wrap');
const topOfNav = nav.offsetTop;

正如我在主要帖子中所评论的，如果我将您提供的代码添加到snipplet中，它对我有效：

const nav=document.querySelector（'.header-menu_-wrap'）；
常数topOfNav=导航偏移；
函数fixNav（）{
如果（window.scrollY>=topOfNav）{
document.body.style.paddingTop=nav.offsetHeight+'px'；
document.body.classList.add（'fixed-nav'）；
}否则{
document.body.style.paddingTop=0；
document.body.classList.remove（'fixed-nav'）；
}
}
window.addEventListener（'scroll'，fixNav）；
//135 140

。修复导航标题-菜单\u包装。标题-容器\u包装{
位置：固定；
盒影：0 5pxRGBA（0,0,0,0.1）；
背景：红色；
}

我编辑了您的原始帖子，将代码作为snipplet包含在内，并在末尾添加了返回行（目前尚不可见）。但我总结了结果：它在XD中有效。