Как сделать так, чтобы моя навигационная панель оставалась в верхней части страницы при прокрутке?

Question

Не могу найти решение для этого.

.container {
  width: 95%;
  margin: 0 auto;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

header {
  background: #FF4136;
}

nav {
  float: center;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 193px;
  padding-top: 23px;
  padding-bottom: 23px;
  position: relative;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

nav a:hover {
  color: #000;
}

nav a:before {
  content: '';
  display: block;
  height: 6px;
  width: 0%;
  background-color: #444;
  position: absolute;
  top: 0;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
} 

<div class="container">
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="informatii.html">Informatii</a></li>
      <li><a href="obiective.html">Obiective Turistice</a></li>
      <li><a href="galerie.html">Galerie</a></li>
      <li><a href="video.html">Video</a></li>
      <li><a href="surse.html">Surse</a></li>
    </ul>
  </nav>
</div>

Я бы хотел, чтобы моя навигационная панель оставалась фиксированной в верхней части страницы. Однако каждый раз, когда я меняю положение на фиксированное, планка полностью исчезает. Понятия не имею, зачем он это делает?

Answer 1

Вот как я бы реализовал «липкое» меню. Контекстная стилизация остается за вами. Flexbox отлично подходит для навигации!

body { 
  background: hotpink;
  margin: 0;
  padding:0
}

.container {
  margin: 0 auto;
  max-width: 95%;
}

main img {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

nav {
    padding: 1em;
    margin: auto;
    left: 0;
    right: 0;
}

nav ul {
    padding: 0;
    list-style: none;
    display: block;
}

nav li {
  margin: 0 auto;
  padding-top: 1em;
  padding-bottom: 1em;
  position: relative;
}

@media screen and (min-width: 600px) {
  body {
    padding-top: 110px;
  }

  nav {
    margin: 0 auto;
    position: fixed;
    margin-top: -110px;
    background: hotpink;
    border-bottom: 4px solid black;
  }

  nav ul {
    display: flex;
    flex-flow: row;
    justify-content: center;
    flex: 1;
    margin: 0;
  }
}

.container {
  margin: 0 auto;
  max-width: 95%;
}

/* Rest is left unchanged */

header::after {
  content: '';
  display: table;
  clear: both;
}

header {
  background: #FF4136;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

nav a:hover {
  color: #000;
}

nav a:before {
  content: '';
  display: block;
  height: 6px;
  width: 0%;
  background-color: #444;
  position: absolute;
  top: 0;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
} 

<div class="container">

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="informatii.html">Informatii</a></li>
                    <li><a href="obiective.html">Obiective Turistice</a></li>
                    <li><a href="galerie.html">Galerie</a></li>
                    <li><a href="video.html">Video</a></li>
                    <li><a href="surse.html">Surse</a></li>
                </ul>
            </nav>

        </div>
        <main class="container">
        <img src="https://source.unsplash.com/random/1200x500" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
        </main>

Answer 2

Вот вам go с решением

.container {
  width: 95%;
  margin: 0 auto;
  position: fixed;
  top: 0;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

header {
  background: #FF4136;
}

nav {
  float: center;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 193px;
  padding-top: 23px;
  padding-bottom: 23px;
  position: relative;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

nav a:hover {
  color: #000;
}

nav a:before {
  content: '';
  display: block;
  height: 6px;
  width: 0%;
  background-color: #444;
  position: absolute;
  top: 0;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
} 

<div class="container">
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="informatii.html">Informatii</a></li>
            <li><a href="obiective.html">Obiective Turistice</a></li>
            <li><a href="galerie.html">Galerie</a></li>
            <li><a href="video.html">Video</a></li>
            <li><a href="surse.html">Surse</a></li>
        </ul>
    </nav>
</div>

Добавить Position: fixed и top: 0 в контейнер

Answer 3

Вы должны сделать только простую вещь:

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

Answer 4

Просто добавьте position: sticky к элементу навигации. Это говорит элементу оставаться в представлении. Таким образом, элемент переключается между относительной и фиксированной позицией.