静态导航栏在离开模态时水平摇晃

Question

目前我在使用 bootstrap5 和 modal glightbox 时遇到了问题。

• 从这些应用程序切换回来时，静态导航栏会水平晃动。
• 与 glightbox 相同，此外，当屏幕变灰时，粘性页脚也会向上滑动。

精心设计的特定功能：粘性页脚、垂直滚动条始终开启

fullscreen sample: https://codepen.io/manu_g/full/dyZOdbV

Answer 1

检查你的 codepen，我观察到 #header 的子元素的 margin-left 和 margin-right 在模式打开时增加。

当您离开模态时，margin-left 和 margin-right 将返回到它们的初始值，从而导致抖动。

固定位置似乎是根源。因此，我会选择 position: sticky 并在 .inner-pages.

中添加一些边距顶部

例如，

.fixed-top {
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.inner-page {
    margin-top: 50px;
}