html - 元素中包含位置粘性？

<分区>

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。

关闭 5 年前。

Improve this question

这可能是由于我对这个新的 CSS 规则缺乏经验，但无论出于何种原因，我将导航设置为 position: sticky;，由于缺乏更好的词语，并没有跟随整个页面？

我不确定为什么，想知道是否有人可以帮助澄清我的原因得到这种行为。 This is a link to my developer space.

.cd-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
  z-index:9999;
}

<header class="cd-header">
  <nav class="navbar navbar-expand-lg" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="img/logo/cd-logo-lr-stky.svg" alt="Continuum Digital Logo" class="brand-logo"></a>

      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-bar bar1"></span>
           <div class="hamburger hamburger--spin">
            <div class="hamburger-box">
              <div class="hamburger-inner"></div>
            </div>
          </div>
        </button>


      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">

          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#services">
                <i class="now-ui-icons location_compass-05"></i>
                Our Journey
              </a>
          </li>

          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#contact">
                <i class="now-ui-icons files_single-copy-04"></i>
                Blog
              </a>
          </li>

          <li class="nav-item">
            <a class="nav-link n-btn" href="#">
                <i class="now-ui-icons arrows-1_share-66"></i>
                Build Your Quote
              </a>
          </li>

        </ul>
      </div>
    </div>
  </nav>
</header>

最佳答案

实际上 position:sticky 一直有效直到它的相关包含 block 高度超过...

在您的示例中，.cd-header 有一个父级(包含 block )body，height:100 仅采用视口(viewport)高度。 ..这就是为什么您的 .cd-header 在传递该高度值后不再粘...

因此尝试从正文中删除 height:100% 或将其设置为 auto...