Javascript 如何对齐元素，使CSS固定在页面加载时不会重叠

我想让我的导航菜单自动对齐，这样它就不会在页面加载时重叠，而是在向下滚动时重叠（动态导航栏）

我目前拥有的是： 正如您在页面初始加载时看到的，导航栏与文本重叠，我希望导航栏在加载页面时不要与文本重叠，而是在滚动时重叠

我当前的CSS在这里：

快速注意：当您访问CSS时，它是一行，因为cloudflare会压缩它。它在服务器上缩进

---

谢谢

因为元素是固定的，所以它与它下面的内容没有关联。包裹主体内容并在顶部应用边距：

var navHeight=$（'#navbar'）.height（）+30；
$（'section'）.css（'marginTop'，navHeight）
#导航栏{
背景色：红色；
左：0；
位置：固定；
排名：0；
宽度：100%；
}

欧米伽勒姆
在建工程
对不起，请稍后再来

此处不需要任何JavaScript。您的“导航栏”元素似乎是一个固定的高度，因此您只需将
正文的顶部边距设置为该高度，再加上一点额外的边距，即可实现所需的内容，这样您的内容就位于固定元素的边缘


正文{
高度：5000px；
利润率：52px 10px 10px；
}
#导航栏{
背景：红色；
左：0；
位置：固定；
排名：0；
宽度：100%；
}
#导航条img{
浮动：左；
保证金：5px；
}
#导航条p{
字体大小：粗体；
线高：42px；
保证金：0；
文本对齐：居中；
}

欧米伽勒姆

在建工程
对不起，请稍后再来
真的吗？为什么要投否决票？我给了你尽可能多的细节。白痴-不是我，但你在粘贴你网站的链接。不提供相关代码。直接粘贴链接到它比复制和复制容易得多。我的代码不是最紧凑的代码，对你来说更容易。不是给帮手的。而且，您应该在这里添加JavaScript代码。你做了些什么吗？试着让我的代码紧凑，特别是为了问一个关于SO的问题，这经常帮助我认识到并解决我遇到的问题。我认为，如果你花时间提取核心问题，这不会是徒劳的。批准你的答案，这比下面的答案更相关。如果你能将我的答案标记为正确答案，那么请。我正在等待计时器允许我。现在完成了工作很好，非常感谢！如果愿意，您可以在这里看到结果：对不起，别担心，cloudflare的缓存需要清除。现在好了。谢谢