Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

实际上position:sticky一直工作，直到相关的包含块高度通过......

在您的示例中，.cd-header有一个父级（包含区块）body，height:100只占用视口高度......这就是为什么.cd-header不再粘在那个高度值通过后......

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

body {
  height:auto;
}

您可以从 here

了解有关position:sticky的更多信息

位置粘贴在元素内？

1 个答案: