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;
top: 0;

导航栏到达最高位置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;
    }
}

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

您可以在导航中使用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;
    }
}

Answer 3

如上所述，要走的路是：

body {
  height: 100vh;
  overflow-y: auto
}

.nav {
  position: sticky;
  top: 20px;
}

关于“并非在所有浏览器中都可用”的说法则完全不同。如果您真的想解决这个问题，这里是一个很好的起点：

您可以使用onscroll eventListener通过getBoundingClientRect（）来检查导航相对于屏幕的位置-但它比粘性实现昂贵得多。

.makeItFixed {
  position: fixed;
  top: 0; left: 0;
};

var nav = document.getElementsByTgName('nav')[0];
window.addEventListener('scroll', function(){
  if (nav.getBoundingClientRect().top <= 0) {
    nav.classList.add('makeItFixed');
  } else {
    nav.classList.remove('makeItFixed');
  }
});

这可能会使用一些适当的优化，包括一个反跳间隔，并最终将getBoundingClientRect（）移到检查之外-这是一项昂贵的操作，因为它会导致每次调用时页面重排/布局。

将来，intersectionObserver API将会接管，但是正如您希望其在“所有”浏览器中运行一样，这是不可能的。

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

3 个答案: