html - 修复 "sticky"导航栏位于屏幕顶部

Question

所以，我一直在尝试使用 HTML 和 CSS 创建一个导航栏，即使用户向下滚动，它也会“粘”在页面顶部。 使用 position: Sticky 标签来完成此操作。问题是，我无法修复页面顶部的 div。

这是我的 CSS:

.bar {
  position:sticky;
  top:0;
  color: white;
  background-color: black
}

p {
  display: inline;
}

...以及我的 HTML 代码:

<nav class="bar">
  <p>Home</p>
  <p>Info</p>
  <p>Contact Us</p>
</nav>

粘性属性有效。问题是，bar 没有“固定”在页面顶部。我知道。不是用于解释的最佳词。 我只是希望它在那里，没有任何边距。尝试减少 body 的填充/边距，但没有成功。我能做什么？

另一个问题:top:0 到底是做什么的？如果没有它，position:sticky 属性就不起作用，我想知道为什么。

Answer 1

粘性定位将被视为相对定位，直到您开始向下滚动。因此，如果粘性元素的父级有一些边距/填充，它将影响该元素。

您可能想尝试固定定位，以便元素始终固定在顶部，没有任何边距。

当然，固定元素会消除元素应有的间隙，因此您的内容可能会重叠，并且需要添加另一个与固定元素高度相同的元素来修复重叠的内容。

例如见下文。

.bar {
  position:fixed;
  top:0;
  color: white;
  background-color: black;
  width:100%;
  left:0;
}

p {
  display: inline;
}

<nav class="bar">
  <p>Home</p>
  <p>Info</p>
  <p>Contact Us</p>
</nav>
<div style="height:1000px">
</div>