Question

在桌面上，导航栏保持固定在顶部，滚动时没有问题。但是，当我在手机上打开网站/使用chrome devtools时，导航栏最初加载良好，直到我开始滚动，这导致导航栏浮动到设备顶部（看上去），最终切断了大约50％导航栏。

首先，我注释掉了我为导航栏编写的一些自定义CSS，以查看是否可以解决该问题，但没有。因此，我跳了起来，写了媒体询问我认为可能导致问题的原因。那没有帮助（除了最终让我写媒体查询我本来应该一直都在）。然后，我找到了一条资源，说我只需要添加一个偏移量/页边距即可解决此问题，但是什么也没做。

<nav id="navbar-scrollspy" class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar nav-sm-query">

预期结果：导航栏固定在移动设备上当前视口的顶部

实际结果：导航栏显示在设备顶部到顶部，导致导航栏被削减30-75％

Answer 1

尝试增加导航栏类的z-index值。

CSS：

.navbar {
   z-index: 9999; // <=== Add this.
 }

Answer 2

这可能与<head>中的视口设置有关。尝试在视口元数据中添加'minimum-scale = 1'。

例如，我的视口设置现在如下所示，并且不再丢失固定位置导航栏的前50％。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">