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

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

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

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

例如，见下文。

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

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

2 个答案: