我有一个由Express提供服务的html文件，它也从api获取数据。 当我点击导航栏中的链接并切换路径时（或者页面被重新加载），顶部的导航栏会向右移动，然后向左移动，我不知道如何解决这个问题。
如果你看一下JSFiddle（下面的链接），你会注意到我有链接到其他页面，例如 /profile, /about，等等。每次加载这些页面时，导航条都会发生变化（它在调整垂直滚动条消失，然后重新出现）。
为了模仿api的调用，我添加了一个叫做 setTimeout. 要重现这个问题，看看我在说什么，你可能需要在你的机器上本地运行这段代码，然后刷新页面。
奇怪的是，这个问题只有在有某种延迟的时候才会发生（比如api调用，或 setTimeout). 如果我去掉延迟并立即加载内容，一切都能正常工作。
一些css代码被注释掉了。 我想稍后添加的唯一关键元素是 position: fixed 来固定导航条在页面顶部。
如何防止导航条移动？
浏览器首先渲染的页面没有滚动条，因为它根本没有必要。然后你在DOM中动态地添加了一些长段，这使得滚动条出现。这就是导致你的内容 "移动 "的原因。
滚动条正在增加你的页面的宽度。为了防止它这样做，你需要这样做。
html{
overflow-y: scroll;
}
我终于找到了一个有效的方法 虽然我不确定这是不是正确的方法。我只是改变了 width 根据 navbar--site-header 班级 100vw 而不是 100%.
DVN-Anakin的回答帮助我理解了这个问题（和一个可能的解决方案），并且。本回答 又提供了一些好的解决办法。