HTML5页面滚动时自动显示隐藏导航效果（jQuery）

今天扣丁学堂给大家介绍一个简单的导航效果，当用户向下滚动页面时自动隐藏导航，在用户向上滚动页面时自动显示导航。

支持IE9+，Chrome，Safari，FireFox等浏览器。

自动显示隐藏导航这种交互出现已经有一段时间了，特别是在移动设备上。这种UX模式背后的想法简单而有效：我们希望导航在我们需要的时候很方便的显示，当用户向下滚动页面时，导航会自动隐藏，为内容留出更多的空间。在用户向上滚动页面时，我们将他的行为理解为想要访问导航，所以我们把导航自动自动显示出来。这种交互现在比较常见，甚至在一些知名网站上都有应用。下面我们来看看简单的实现：

创建HTML结构

HTML结构基本结构如下，header.cd-auto-hide-header元素包裹主导航元素nav.cd-primary-nav，页面主要内容元素main.cd-main-content。

HTML代码:

<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">Theteam</a></li>

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

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

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

</ul>

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

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

<mainclass="cd-main-content">

<!--contenthere-->

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

如果页面有一个子导航，那么在header元素上添加一个nav.cd-secondary-nav。

HTML代码:

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

<!--linkshere-->

</ul>

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

<navclass="cd-secondary-nav">

<ul>

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

<!--additionallinkshere-->

</ul>

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

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

<mainclass="cd-main-contentsub-nav">

<!--contenthere-->

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

最后，有些页面可能主导航和子导航之间会放一张高大上的大尺寸banner图，那么在.cd-secondary-nav元素的下方插入.cd-hero元素。

HTML代码:

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

<!--linkshere-->

</ul>

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

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

<sectionclass="cd-hero">

<!--contenthere-->

</section><!--.cd-hero-->

<navclass="cd-secondary-nav">

<ul>

<!--linkshere-->

</ul>

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

<mainclass="cd-main-contentsub-nav-hero">

<!--contenthere-->

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

添加样式

我们使用.cd-auto-hide-header类来定义主要样式。默认情况下，让header.cd-auto-hide-header元素固定定位position:fixed;，top为0；当用户开始向下滚动页面时，用.is-hidden类来隐藏可视区域上方的header.cd-auto-hide-header元素。

CSS代码:

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

}

Demo中各种情况的样式自己查看，不做具体解释了。

事件处理

我们使用jQuery来监听window对象上的scroll事件。

JavaScript代码:

varscrolling=false;

$(window).on('scroll',function(){

if(!scrolling){

scrolling=true;

(!window.requestAnimationFrame)

?setTimeout(autoHideHeader,250)

:requestAnimationFrame(autoHideHeader);

}

});

autoHideHeader()函数根据用户向上或者向下滚动页面来处理隐藏/显示导航。

以上就是关于扣丁学堂HTML5培训之页面滚动时自动显示隐藏导航效果（jQuery）的详细介绍，最后想要工作不累就要不断的提升自己的技能，请关注扣丁学堂官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5视频教程系统，通过千锋扣丁学堂金牌讲师在线录制的第一套自适应HTML5在线视频课程系统，让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：751662650。