如何仅使用 Html 和 CSS 在滚动上创建固定/粘性标题？

Question

这是我的 Html。我想使用 html 和 css 修复顶部的导航项，我尝试了很多方法，但无法修复它。没有 JavaScript 或 jQuery 如何构建它？

<div class="contain">
  <p>
    Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones 
    no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae 
    gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec 
    et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
  </p>
</div>
<nav>
  <div class="navWide">
    <div class="wideDiv">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="navNarrow">
    <i class="fa fa-bars fa-2x"></i>
    <div class="narrowLinks hidden">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</nav>
<div class="contain">
      <p>
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones 
        no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae 
        gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec 
        et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
      </p>
    </div>

我的自定义 CSS 使用这个。我该如何解决我的问题？这对我和其他人来说都非常有帮助，为什么我想使用 CSS 来完成这个工作。我正在使用 html 和 CSS 制作一个小组件，这是又一个组件，我被困在这里了。

<div class="contain">
  <p>
    Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones 
    no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae 
    gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec 
    et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
  </p>
</div>
<nav>
  <div class="navWide">
    <div class="wideDiv">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="navNarrow">
    <i class="fa fa-bars fa-2x"></i>
    <div class="narrowLinks hidden">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</nav>
<div class="contain">
      <p>
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones 
        no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae 
        gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec 
        et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
      </p>
    </div>

Answer 1

你实际上可以使用一个简单的

position: sticky;
top: 0;    

一旦导航栏到达顶部位置 0，粘性行为就会应用。

position: sticky;
top: 0;    

.contain{
  height:100vh;
  backgroud:#ccc;
}

nav {
    background-color: #CCC;
    overflow: hidden;
    padding: 1em;
    border-bottom: 1px solid #000;
    position: sticky;
    top: 0;
}

nav a {
        color: #000;
}

nav a:visited {
        color: #000;
}

nav .navWide {
    display: none;
    margin: 0 auto;
}

nav .navWide .wideDiv {
    text-align: center;
}

nav .navWide .wideDiv a {
    text-decoration: none;
    display: inline-block;
    padding: 0 2em;
}

nav .navNarrow i {
    float: left;
    cursor: pointer;
    color: #000;
}

nav .navNarrow .narrowLinks a {
    text-decoration: none;
    display: block;
    float: left;
    clear: left;
    padding: 0.5em 0;
}

.hidden {
  display: none;
}

/*Adjust breakpoint as desired to select when the "hamburger" menu is
replaced by just the links.*/
@media (min-width: 480px) {

    nav .navWide {
        display: block;
    
  }

    nav .navNarrow {
        display: none;
    }
}