滚动时如何使导航栏保持在页面顶部？

时间：2020-03-19 08:43:57

标签： html css

我找不到解决方案。

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

我希望我的导航栏保持固定在页面顶部。但是，每次我将位置更改为固定时，该条都会完全消失。我不知道为什么要这么做？

4 个答案:

答案 0 :(得分：0)

只需将position: sticky添加到您的nav元素中即可。这告诉元素保留在视图中。因此，该元素在相对位置和固定位置之间切换。

答案 1 :(得分：0)

您在这里找到解决方法

.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添加到容器中

答案 2 :(得分：0)

您只需要做一件简单的事情：

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

答案 3 :(得分：0)

这是我实现“粘性”菜单的方式。上下文样式留给您。 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>

相关问题
最新问题