Question

我正在建立我的第一个网站，我想使标签栏停留在屏幕顶部并在滚动时停留在屏幕上，但是position：sticky似乎没有这样做。

div#tabBar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  background-color: #29335C;
}

<div>
  <div id="tabBar">
    <a class="tabLinks">Home</a>
    <a class="tabLinks">About Me</a>
  </div>
  <h1 id="homeFrame">Anna Grace</h1>
  <div id="projectList"></div>
</div>

Answer 1

如果要将其显示在屏幕顶部，只需切换到position: fixed;

位置fixed总是相对于窗口的左上角，这对您来说很方便。请注意，由于固定要素没有宽度，因此内容将在其下方开始。您可能会想让自己的身体顶部等于标头的高度。

位置粘性的工作原理有所不同。它一直保持为块/常规元素，直到到达给定的top位置为止，然后才切换为fixed行为。像那些出现了下一则内容并向下滚动的广告一样思考。

在您的情况下，差异将是最小的，因为标头从0开始，因此它立即切换为固定，可能会表现得有些不可预测。

Answer 2

给外部div一些高度，然后尝试。谢谢

div#tabBar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  background-color: #29335C;
}

.outer{
height:1000px}

<div class="outer">
  <div id="tabBar">
    <a class="tabLinks">Home</a>
    <a class="tabLinks">About Me</a>
  </div>
  <h1 id="homeFrame">Anna Grace</h1>
  <div id="projectList"></div>
</div>

CSS“位置：粘性”不粘

2 个答案: