自动隐藏导航

 查看演示  website  立即下载

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

创建结构

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 插入下方 <header>，其次是 the.cd-secondary-navelement:

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

添加样式

我们用the.cd-auto-hide-headerclass 来定义自动隐藏页眉的主要样式。默认情况下，标头有一个固定的位置和一个顶部为零;当用户开始向下滚动，the.is-hiddenclass用来隐藏标题右边上面视区。

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

最后，“主要内容”和“简介块”定义基本样式.cd-main-contentand.cd-hero（主要是填充/固定头）的基本样式。

事件处理

我们使用jQuery来监听窗口对象的滚动事件

varscrolling = false;
$(window).on('scroll',
function() {
    if (!scrolling) {
        scrolling = true; (!window.requestAnimationFrame) ? setTimeout(autoHideHeader, 250) : requestAnimationFrame(autoHideHeader);
    }
});

autoHideHeader() 函数功能隐藏/显示导航根据用户是否向上或向下滚动。

PREVIOUS:
NEXT:
iziModal-时尚炫酷的jQuery模态窗口插件
jQuery 3d轮播插件flipster.js