导航栏在某些页面上发粘，但在其他页面上没有

Question

我在网站的每个页面上都使用相同的导航栏：http://asia-hr.com

徽标在首页上只是不同，但这是唯一的区别

导航栏在首页上是粘滞的，但并非在其他所有页面上都有粘性，因为每页上的#navbar具有相同的CSS属性。

您知道可能是什么问题吗？

/ *导航栏* /

#navbar{
    z-index: 100000;
    background:#34495e;
    position: sticky;
    top:0;
    display:flex;
    justify-content:space-between;
    padding:1rem;
}

Answer 1

欢迎使用StackOverflow！

问题很简单。 position: sticky取决于其父项。 由于您的#navbar在您的主页中是body的子级，因此它将坚持使用body。 但是在其他页面中，您的#navbar是#header的子级，并且#header仅具有#navbar，这导致导航栏的高度相同，因此不再具有粘性。

您可以通过两种方式解决此问题：

1. 从#navbar中提取#header，使其成为body的子代。
2. 将position: sticky更改为position: fixed，因为在您的情况下，这是同一件事。