自动隐藏导航

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

创建结构

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