如何解决我的位置粘在导航栏问题上

Question

我正在构建一个在导航栏上方带有 header 的响应式网站，我的目标当然是在向下滚动时让导航栏保持在顶部。

我是 HTML 和 CSS 的新手，所以我不确定是否导航栏 CSS class 代码顶部的顺序应该是。但以防万一，我将 position:sticky; 放在顶部，然后将 top:0; 值放在第二位。我也试过直接把它放在头上。但无济于事。我将包含代码供您查看。

.navbar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  background-color: black;
  height: 74px;
  overflow: hidden;
  margin: 0px 1px 0px 1px;
  border: 1px;
  border-radius: 4px;
  border-style: solid;
  border-color: #A6A6A6;
}

<nav>
  <div class="navbar">
    <a href="#">
      <button class="btn text1">Text 1</button>
    </a>
    <a href="#">
      <button class="btn text2">Text 2</button>
    </a>
    <a href="#">
      <button class="btn text3">Text 3</button>
    </a>
    <a href="#">
      <button class="btn text4">Text 4</button>
    </a>
    <a href="#">
      <button class="btn text5">Text 5</button>
    </a>
  </div>
</nav>

Answer 1

修复 navbar class。它会把它粘在那里。无论哪种方式它都不会坚持。例子;

.navbar{
  position: fixed;
  top: 0;
}

Answer 2

将 position:sticky 添加到父级。（还要确保您始终检查 browser compatibilty）

nav {
 position: sticky;
 top: 0;
}
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;    
  background-color: black;
  height: 74px;
  overflow: hidden;
  margin: 0px 1px 0px 1px;
  border: 1px;
  border-radius: 4px;   
  border-style: solid;
  border-color:#A6A6A6;   
 }

工作fiddle： https://jsfiddle.net/9fvwp7x1/5/

如何解决我的位置粘在导航栏问题上

how to fix my position sticky with navigation bar problem

html

css

position

sticky