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

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. 从#header 中提取#navbar，使其成为body 的子代。
2. 将position: sticky 更改为position: fixed，因为在您的情况下，它是一样的。