html - 如何仅使用 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 制作一个小组件，这是另一个组件，我被困在这里。

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

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

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

Answer 1

您可以在导航中使用 position: sticky;，但请注意，并非所有浏览器(例如 IE 11)都支持它。如果您想看一下，这是兼容性图表:https://caniuse.com/#feat=css-sticky

更安全的解决方法是将 position: fixed; 设置为您的导航，并为您的内容提供一些顶部填充。

所以你的 css 将如下所示:

body {
  margin: 0;
}

.contain{
  height:100vh;
  background:#ccc;
  padding-top: 50px;

}

nav {
    background-color: #CCC;
    overflow: hidden;
    padding: 1em;
    border-bottom: 1px solid #000;
    position: fixed;
    top: 0px;
    display: block;
    width: 100%;
}

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