
自动隐藏导航已存在相当长的一段时间了,尤其是在移动设备上。这种用户体验模式背后的理念是简单有效,这让我们更容易操作。所以我们把它贴在上面。当用户向下滚动页面,腾出更多的空间内容。如果用户向上滚动页面,我们理解他的将要访问的导航,所以我们把它带回来。
创建结构
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 -->
添加样式
我们用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() 函数功能隐藏/显示导航根据用户是否向上或向下滚动。