我的 Sticky Nav 不工作/部分工作

Question

我想制作一个类似于此链接中的粘性导航栏：https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_sticky

但是，当我将 position: sticky; 属性添加到代码中的元素时，它可以工作，并且导航栏在滚动后会粘住，但当我向下滚动时它会消失。

我希望导航栏像示例中的那样具有粘性。

body {
  margin: 0;
  box-sizing: content-box;
  font-family: 'Lato', sans-serif;
}

.contenedor {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

.menu-navegacion {
  padding: 0;
  display: flex;
  height: 100px;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(75, 75, 75);
  position: sticky;
  top: 0;
  z-index: 30;
}

.logo {
  padding-right: 10%;
  padding-left: 10%;
  height: 50px;
  width: 20%;
  display: flex;
  justify-content: center;
  margin-left: 1%;
  position: relative;
}

.contenedor-triangulo {
  height: 100%;
  position: absolute;
}

.triangulo {
  height: 0%;
  width: 0%;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  border-bottom: 50px solid red;
  display: block;
}

.menu-lista {
  margin-right: 20%;
}

.menu-lista ul li {
  list-style: none;
  display: inline-block;
}

.menu-lista ul li a {
  text-decoration: none;
  color: white;
  padding-left: 20px;
}

.menu-header {
  height: 600px;
  background-color: cornflowerblue;
}

#slider {
  margin: 0 auto;
  width: 80%;
  max-width: 100%;
  text-align: center;
}

#slider input[type=radio] {
  display: none;
}

#slider label {
  cursor: pointer;
  text-decoration: none;
}

#slides {
  padding: 10px;
  border: 3px solid #ccc;
  background: #fff;
  position: relative;
  z-index: 1;
}

#overflow {
  width: 100%;
  overflow: hidden;
}

#slide1:checked~#slides .inner {
  margin-left: 0;
}

#slide2:checked~#slides .inner {
  margin-left: -100%;
}

#slide3:checked~#slides .inner {
  margin-left: -200%;
}

#slide4:checked~#slides .inner {
  margin-left: -300%;
}

#slides .inner {
  transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  width: 400%;
  line-height: 0;
  height: 550px;
}

#slides .slide {
  width: 25%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #fff;
}

#slides .slide_1 {
  background: #00171F;
}

#slides .slide_2 {
  background: #003459;
}

#slides .slide_3 {
  background: #007EA7;
}

#slides .slide_4 {
  background: #00A8E8;
}

#controls {
  margin: -180px 0 0 0;
  width: 100%;
  height: 50px;
  z-index: 3;
  position: relative;
}

#controls label {
  transition: opacity 0.2s ease-out;
  display: none;
  width: 50px;
  height: 50px;
  opacity: .4;
}

#controls label:hover {
  opacity: 1;
}

#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1) {
  background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
  float: right;
  margin: 0 -50px 0 0;
  display: block;
}

#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
  background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
  float: left;
  margin: 0 0 0 -50px;
  display: block;
}

#bullets {
  margin: 150px 0 0;
  text-align: center;
}

#bullets label {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #ccc;
  margin: 0 10px;
}

#slide1:checked~#bullets label:nth-child(1),
#slide2:checked~#bullets label:nth-child(2),
#slide3:checked~#bullets label:nth-child(3),
#slide4:checked~#bullets label:nth-child(4) {
  background: #444;
}

@media screen and (max-width: 900px) {
  #slide1:checked~#controls label:nth-child(2),
  #slide2:checked~#controls label:nth-child(3),
  #slide3:checked~#controls label:nth-child(4),
  #slide4:checked~#controls label:nth-child(1),
  #slide1:checked~#controls label:nth-child(4),
  #slide2:checked~#controls label:nth-child(1),
  #slide3:checked~#controls label:nth-child(2),
  #slide4:checked~#controls label:nth-child(3) {
    margin: 0;
  }
  #slides {
    max-width: calc(100% - 140px);
    margin: 0 auto;
  }
}

#quienessomos {
  margin: 0;
  width: 100%;
  height: 800px;
  /*
    background: palegoldenrod;*/
  background: rgba(211, 211, 211, 0.199);
}

#grid1 {
  margin: 0;
  display: grid;
  grid-template-columns: 10% 40% 0% 40% 10%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  column-gap: 50px;
  /*
    border: 1px solid black;*/
  width: 100%;
  height: 100%;
}

#imagen1 {
  background-image: url(../images/main1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  grid-area: 2 / 2 / 5 / 3;
}

#texto1 {
  position: relative;
  width: 100%;
  height: 100%;
  /*
    background: olive;*/
  grid-area: 2 / 3 / 5 / 5;
}

#contenedortexto1 {
  position: absolute;
  display: inline-block;
  width: 50%;
  height: 100%;
  /*
    background: red;*/
}

#contenedortexto1 h2 {
  color: rgb(7, 83, 184);
  font-weight: 900;
  font-size: 2em;
}

#superior {
  font-size: 1.4em;
  line-height: 1.5em;
  font-weight: 400;
}

#inferior {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.4em;
  line-height: 1.3em;
  font-weight: 300;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Ubuntu:wght@300&display=swap" rel="stylesheet">

<body>
  <header>
    <nav class="menu-navegacion contenedor">
      <div class="logo">
        <div class="contenedor-triangulo">
          <div class="triangulo"></div>
        </div>
      </div>
      <div class="menu-lista">
        <ul>
          <li><a href=#>INICIO</a></li>
          <li><a href=#>PRODUCTOS</a></li>
          <li><a href=#>EMPRESA</a></li>
          <li><a href=#>CONTACTO</a></li>
        </ul>
      </div>
    </nav>
    <div id="slider">
      <input type="radio" name="slider" id="slide1" checked>
      <input type="radio" name="slider" id="slide2">
      <input type="radio" name="slider" id="slide3">
      <input type="radio" name="slider" id="slide4">
      <div id="slides">
        <div id="overflow">
          <div class="inner">
            <div class="slide slide_1">
              <div class="slide-content">
                <h2>Slide 1</h2>
                <p>Content for slide 1</p>
              </div>
            </div>
            <div class="slide slide_2">
              <div class="slide-content">
                <h2>Slide 2</h2>
                <p>Content for slide 2</p>
              </div>
            </div>
            <div class="slide slide_3">
              <div class="slide-content">
                <h2>Slide 3</h2>
                <p>Content for slide 3</p>
              </div>
            </div>
            <div class="slide slide_4">
              <div class="slide-content">
                <h2>Slide 4</h2>
                <p>Content for slide 4</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="controls">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
      </div>
      <div id="bullets">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
      </div>
    </div>
  </header>
  <section id="main">
    <div class="contenedor" id="quienessomos">
      <div id="grid1">
        <div id="imagen1"></div>
        <div id="texto1">
          <div id="contenedortexto1">
            <h2>QUIMICA TRV</h2>
            <p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
            <p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
              automotriz, empresas de servicios, etc.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="main">
    <div class="contenedor" id="quienessomos">
      <div id="grid1">
        <div id="imagen1"></div>
        <div id="texto1">
          <div id="contenedortexto1">
            <h2>QUIMICA TRV</h2>
            <p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
            <p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
              automotriz, empresas de servicios, etc.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

Answer 1

您的导航正确地表现“粘性”，这意味着它会粘在父元素的顶部。

您可以：

• 将导航元素向上移动到<header> 之外，到<body> 下方；或
• 让您的 <header> 也具有粘性

您的选择将取决于您的 ui 要求以及在不同视口高度下对屏幕空间的使用。

Answer 2

我想我可能已经找到了您的问题，您的导航栏位于 <header></header> 标记内，这就是您滚动过去页眉后它消失的原因。

尝试删除页眉标签，看看它是否留在页面上。

Answer 3

要让您的代码像链接中显示的示例那样运行，我必须将滑块移到标题元素之外。然后我必须用一个固定的位置和顶部的 0px 对标题元素进行编码。

我刚刚测试过，它可以按您的意愿工作。 :)

body {
  margin: 0;
  box-sizing: content-box;
  font-family: 'Lato', sans-serif;
}

/* Removed slider from the Header element. Header is a fixed and independent block now*/
header {
  position:fixed;
  top:0;
  z-index:10;
  width: 100%;
  display:block;
}

.contenedor {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

.menu-navegacion {
  padding: 0;
  display: flex;
  height: 100px;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(75, 75, 75);
  position: sticky;
  top: 0;
  z-index: 30;
}

.logo {
  padding-right: 10%;
  padding-left: 10%;
  height: 50px;
  width: 20%;
  display: flex;
  justify-content: center;
  margin-left: 1%;
  position: relative;
}

.contenedor-triangulo {
  height: 100%;
  position: absolute;
}

.triangulo {
  height: 0%;
  width: 0%;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  border-bottom: 50px solid red;
  display: block;
}

.menu-lista {
  margin-right: 20%;
}

.menu-lista ul li {
  list-style: none;
  display: inline-block;
}

.menu-lista ul li a {
  text-decoration: none;
  color: white;
  padding-left: 20px;
}

.menu-header {
  height: 600px;
  background-color: cornflowerblue;
}

/* Added margin top equal to header height, in this case 100px */
#slider {
  margin: 100px auto 0 auto;
  width: 80%;
  max-width: 100%;
  text-align: center;
}

#slider input[type=radio] {
  display: none;
}

#slider label {
  cursor: pointer;
  text-decoration: none;
}

#slides {
  padding: 10px;
  border: 3px solid #ccc;
  background: #fff;
  position: relative;
  z-index: 1;
}

#overflow {
  width: 100%;
  overflow: hidden;
}

#slide1:checked~#slides .inner {
  margin-left: 0;
}

#slide2:checked~#slides .inner {
  margin-left: -100%;
}

#slide3:checked~#slides .inner {
  margin-left: -200%;
}

#slide4:checked~#slides .inner {
  margin-left: -300%;
}

#slides .inner {
  transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  width: 400%;
  line-height: 0;
  height: 550px;
}

#slides .slide {
  width: 25%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #fff;
}

#slides .slide_1 {
  background: #00171F;
}

#slides .slide_2 {
  background: #003459;
}

#slides .slide_3 {
  background: #007EA7;
}

#slides .slide_4 {
  background: #00A8E8;
}

#controls {
  margin: -180px 0 0 0;
  width: 100%;
  height: 50px;
  z-index: 3;
  position: relative;
}

#controls label {
  transition: opacity 0.2s ease-out;
  display: none;
  width: 50px;
  height: 50px;
  opacity: .4;
}

#controls label:hover {
  opacity: 1;
}

#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1) {
  background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
  float: right;
  margin: 0 -50px 0 0;
  display: block;
}

#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
  background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
  float: left;
  margin: 0 0 0 -50px;
  display: block;
}

#bullets {
  margin: 150px 0 0;
  text-align: center;
}

#bullets label {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #ccc;
  margin: 0 10px;
}

#slide1:checked~#bullets label:nth-child(1),
#slide2:checked~#bullets label:nth-child(2),
#slide3:checked~#bullets label:nth-child(3),
#slide4:checked~#bullets label:nth-child(4) {
  background: #444;
}

@media screen and (max-width: 900px) {
  #slide1:checked~#controls label:nth-child(2),
  #slide2:checked~#controls label:nth-child(3),
  #slide3:checked~#controls label:nth-child(4),
  #slide4:checked~#controls label:nth-child(1),
  #slide1:checked~#controls label:nth-child(4),
  #slide2:checked~#controls label:nth-child(1),
  #slide3:checked~#controls label:nth-child(2),
  #slide4:checked~#controls label:nth-child(3) {
    margin: 0;
  }
  #slides {
    max-width: calc(100% - 140px);
    margin: 0 auto;
  }
}

#quienessomos {
  margin: 0;
  width: 100%;
  height: 800px;
  /*
    background: palegoldenrod;*/
  background: rgba(211, 211, 211, 0.199);
}

#grid1 {
  margin: 0;
  display: grid;
  grid-template-columns: 10% 40% 0% 40% 10%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  column-gap: 50px;
  /*
    border: 1px solid black;*/
  width: 100%;
  height: 100%;
}

#imagen1 {
  background-image: url(../images/main1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  grid-area: 2 / 2 / 5 / 3;
}

#texto1 {
  position: relative;
  width: 100%;
  height: 100%;
  /*
    background: olive;*/
  grid-area: 2 / 3 / 5 / 5;
}

#contenedortexto1 {
  position: absolute;
  display: inline-block;
  width: 50%;
  height: 100%;
  /*
    background: red;*/
}

#contenedortexto1 h2 {
  color: rgb(7, 83, 184);
  font-weight: 900;
  font-size: 2em;
}

#superior {
  font-size: 1.4em;
  line-height: 1.5em;
  font-weight: 400;
}

#inferior {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.4em;
  line-height: 1.3em;
  font-weight: 300;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Ubuntu:wght@300&display=swap" rel="stylesheet">

<body>
    <header>
      <nav class="menu-navegacion contenedor">
        <div class="logo">
          <div class="contenedor-triangulo">
            <div class="triangulo"></div>
          </div>
        </div>
        <div class="menu-lista">
          <ul>
            <li><a href=#>INICIO</a></li>
            <li><a href=#>PRODUCTOS</a></li>
            <li><a href=#>EMPRESA</a></li>
            <li><a href=#>CONTACTO</a></li>
          </ul>
        </div>
      </nav>
    </header>
    <!-- Slider Is outside the header element -->
    <div id="slider">
      <input type="radio" name="slider" id="slide1" checked>
      <input type="radio" name="slider" id="slide2">
      <input type="radio" name="slider" id="slide3">
      <input type="radio" name="slider" id="slide4">
      <div id="slides">
        <div id="overflow">
          <div class="inner">
            <div class="slide slide_1">
              <div class="slide-content">
                <h2>Slide 1</h2>
                <p>Content for slide 1</p>
              </div>
            </div>
            <div class="slide slide_2">
              <div class="slide-content">
                <h2>Slide 2</h2>
                <p>Content for slide 2</p>
              </div>
            </div>
            <div class="slide slide_3">
              <div class="slide-content">
                <h2>Slide 3</h2>
                <p>Content for slide 3</p>
              </div>
            </div>
            <div class="slide slide_4">
              <div class="slide-content">
                <h2>Slide 4</h2>
                <p>Content for slide 4</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="controls">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
      </div>
      <div id="bullets">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
      </div>
    </div>

  <section id="main">
    <div class="contenedor" id="quienessomos">
      <div id="grid1">
        <div id="imagen1"></div>
        <div id="texto1">
          <div id="contenedortexto1">
            <h2>QUIMICA TRV</h2>
            <p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
            <p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
              automotriz, empresas de servicios, etc.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="main">
    <div class="contenedor" id="quienessomos">
      <div id="grid1">
        <div id="imagen1"></div>
        <div id="texto1">
          <div id="contenedortexto1">
            <h2>QUIMICA TRV</h2>
            <p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
            <p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
              automotriz, empresas de servicios, etc.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>