自动隐藏导航已存在相当长的一段时间了，尤其是在移动设备上。这种用户体验模式背后的理念是简单有效，这让我们更容易操作。所以我们把它贴在上面。当用户向下滚动页面，腾出更多的空间内容。如果用户向上滚动页面，我们理解他的将要访问的导航，所以我们把它带回来。

创建结构

TheHTML 体系组成的 aheader.cd-auto-hide-headerelemen 用来包装的主导航 (nav.cd-primary-nav) 和amain.cd-main-content页面主要内容。

<headerclass="cd-auto-hide-header">

  <divclass="logo">

    <ahref="#0">

      <imgsrc="img/cd-logo.svg" alt="Logo"></a>

        </div>

        <navclass="cd-primary-nav">

          <ahref="#cd-navigation" class="nav-trigger">

            <span>

              <emaria-hidden="true"></em>Menu</span>

            </a>

            <!-- .nav-trigger -->

            <ulid="cd-navigation">

              <li>

                <ahref="#0">The team</a></li>

              <li>

                <ahref="#0">Our Services</a></li>

              <li>

                <ahref="#0">Our Projects</a></li>

              <li>

                <ahref="#0">Contact Us</a></li>

              </ul>

              </nav>

              <!-- .cd-primary-nav --></header>

              <!-- .cd-auto-hide-header -->

              <mainclass="cd-main-content">

                <!-- content here --></main>

                <!-- .cd-main-content -->

如果页面有一个导航栏，插入标题元素的additionalnav.cd-secondary-navis

<headerclass="cd-auto-hide-header">

  <divclass="logo">

    <ahref="#0">

      <imgsrc="img/cd-logo.svg" alt="Logo"></a>

        </div>

        <navclass="cd-primary-nav">

          <ahref="#cd-navigation" class="nav-trigger">

            <span>

              <emaria-hidden="true"></em>Menu</span>

            </a>

            <!-- .nav-trigger -->

            <ulid="cd-navigation">

              <!-- links here --></ul>

              </nav>

              <!-- .cd-primary-nav -->

              <navclass="cd-secondary-nav">

                <ul>

                  <li>

                    <ahref="#0">Intro</a></li>

                  <!-- additional links here --></ul>

                </nav>

                <!-- .cd-secondary-nav --></header>

                <!-- .cd-auto-hide-header -->

                <mainclass="cd-main-content sub-nav">

                  <!-- content here --></main>

                  <!-- .cd-main-content -->

最后，如果二级导航低于hero block，a.cd-heroelement 插入下方

<headerclass="cd-auto-hide-header">

  <divclass="logo">

    <ahref="#0">

      <imgsrc="img/cd-logo.svg" alt="Logo"></a>

        </div>

        <navclass="cd-primary-nav">

          <ahref="#cd-navigation" class="nav-trigger">

            <span>

              <emaria-hidden="true"></em>Menu</span>

            </a>

            <!-- .nav-trigger -->

            <ulid="cd-navigation">

              <!-- links here --></ul>

              </nav>

              <!-- .cd-primary-nav --></header>

              <!-- .cd-auto-hide-header -->

              <sectionclass="cd-hero">

                <!-- content here --></section>

                <!-- .cd-hero -->

                <navclass="cd-secondary-nav">

                  <ul>

                    <!-- links here --></ul>

                  </nav>

                  <!-- .cd-secondary-nav -->

                  <mainclass="cd-main-content sub-nav-hero">

                    <!-- content here --></main>

                    <!-- .cd-main-content -->

.cd - auto - hide - header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100 % ;

    height: 60px;

    transition: transform.5s;

}.cd - auto - hide - header.is - hidden {

    transform: translateY( - 100 % );

}

.cd - secondary - nav.fixed {

    position: fixed;

    top: 60px;

}.cd - secondary - nav.slide - up {

    transform: translateY( - 60px);

}

varscrolling = false;

$(window).on('scroll',

function() {

    if (!scrolling) {

        scrolling = true; (!window.requestAnimationFrame) ? setTimeout(autoHideHeader, 250) : requestAnimationFrame(autoHideHeader);

    }

});