修复屏幕顶部的“粘性”导航栏

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>

sticky礼仪有效。问题是，bar没有“固定”在页面顶部。我知道。不是用于解释的最佳单词。我只是希望它在那里，没有任何边缘。试图减少身体的填充/边缘，但没有奏效。我能做什么？

另一个问题：真正的top:0做了什么？没有它，position:sticky的适当性是行不通的，我想知道为什么。

Answer 1

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

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

当然，fixed元素会删除元素所在位置的间隙，因此内容可能会重叠，并且需要添加另一个与固定元素具有相同高度的元素来修复重叠内容。

见下面的例子。

.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>

Answer 2

要解决导航栏上的边距问题，最好在CSS代码顶部进行重置以覆盖浏览器默认值。在这里，我将所有元素的边距和填充设置为0.由于它位于顶部，因此它后面的任何样式都将覆盖重置，您可以根据自己的内容进行自定义。

由于浏览器需要确定元素的最终位置，因此Top属性对于粘滞位置是必要的。 Left，Right和Bottom属性也可以完成这项工作。

* {
  margin: 0px;
  padding: 0px;
}

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

p {
  display: inline;
}

.demoFiller {
  background-color: coral;
}

<nav class="bar">
  <p>Home</p>
  <p>Info</p>
  <p>Contact Us</p>
</nav>
<div class="demoFiller">
  0<br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br> 0
  <br> 1
  <br> 2
  <br> 3
  <br> 4
  <br> 5
  <br> 6
  <br> 7
  <br> 8
  <br> 9
  <br>
</div>