Блог

Я создаю адаптивный веб-сайт с заголовком над панелью навигации, и моя цель, конечно, состоит в том, чтобы панель навигации оставалась вверху при прокрутке вниз.

Я новичок в HTML и CSS, поэтому я не совсем уверен, должен ли быть порядок в том, что должно быть в верхней части кода класса CSS для панели навигации. Но на всякий случай я поставил 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>  

Добавить позицию: привязка к родительскому элементу. (Также убедитесь, что вы всегда проверяете совместимость с браузером)

 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;   
 }
  

Рабочая скрипка:
https://jsfiddle.net/9fvwp7x1/5 /

Исправьте navbar класс. Он будет придерживаться его там. В любом случае это не будет прилипать. Пример;

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