Javascript 滚动固定标题显示得比所需的更低

我在创建滚动固定标题时遇到一些困难。我在这里找到了一个很好的例子，现在我正试图让它与我的变化，我试图适应它的工作

我添加了比示例中更多的div，现在每当我滚动经过黄色条时，红色条（我的标题）显示的比我想要的低

我制作了一把小提琴来展示它在做什么

这一直有效，直到我将我的

top

边距添加到我的div id join\u登录。现在离顶端有那么远

#join_login {
position: absolute;
right: 15%;
top: 27px;
font-size: 1em;
color: #383838;
}

在到达滚动点后，如何使标题保持固定在顶部？

这是您想要的吗

我刚刚删除了页边空白top-50px，并将其替换为

top: 0;

---

这应该能奏效！您可以通过添加页边距顶部：-15px来消除#徽标上方的空间

#logo {
    position: absolute;
    left: 15%;
    top: 22px;
    font-size: 2em;
    margin-top: -15px;
}

---

开玩笑！我想我误解了你的意图，如果你想在向下滚动时将红色标题粘贴到页面顶部：

• 使用位置：固定；告诉标题保持在同一位置，而不管滚动

• 使用top:0px；要告诉页眉，您希望将其固定到的位置是页面的最顶部
  标题{ }

---

哇，真不敢相信我错过了。这正是我想要的。谢谢

position: fixed;
top: 0px;
width: 100%;
height: 75px;
background: red;
z-index: 100;
border-bottom: 1px solid #888888;