今天扣丁學(xué)堂給大家介紹一個(gè)簡(jiǎn)單的導(dǎo)航效果，當(dāng)用戶向下滾動(dòng)頁(yè)面時(shí)自動(dòng)隱藏導(dǎo)航，在用戶向上滾動(dòng)頁(yè)面時(shí)自動(dòng)顯示導(dǎo)航。

支持IE9+，Chrome，Safari，F(xiàn)ireFox等瀏覽器。

自動(dòng)顯示隱藏導(dǎo)航這種交互出現(xiàn)已經(jīng)有一段時(shí)間了，特別是在移動(dòng)設(shè)備上。這種UX模式背后的想法簡(jiǎn)單而有效：我們希望導(dǎo)航在我們需要的時(shí)候很方便的顯示，當(dāng)用戶向下滾動(dòng)頁(yè)面時(shí)，導(dǎo)航會(huì)自動(dòng)隱藏，為內(nèi)容留出更多的空間。在用戶向上滾動(dòng)頁(yè)面時(shí)，我們將他的行為理解為想要訪問(wèn)導(dǎo)航，所以我們把導(dǎo)航自動(dòng)自動(dòng)顯示出來(lái)。這種交互現(xiàn)在比較常見，甚至在一些知名網(wǎng)站上都有應(yīng)用。下面我們來(lái)看看簡(jiǎn)單的實(shí)現(xiàn)：

創(chuàng)建HTML結(jié)構(gòu)

HTML結(jié)構(gòu)基本結(jié)構(gòu)如下，header.cd-auto-hide-header元素包裹主導(dǎo)航元素nav.cd-primary-nav，頁(yè)面主要內(nèi)容元素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-->

如果頁(yè)面有一個(gè)子導(dǎo)航，那么在header元素上添加一個(gè)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-->

最后，有些頁(yè)面可能主導(dǎo)航和子導(dǎo)航之間會(huì)放一張高大上的大尺寸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類來(lái)定義主要樣式。默認(rèn)情況下，讓header.cd-auto-hide-header元素固定定位position:fixed;，top為0；當(dāng)用戶開始向下滾動(dòng)頁(yè)面時(shí)，用.is-hidden類來(lái)隱藏可視區(qū)域上方的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來(lái)監(jiān)聽window對(duì)象上的scroll事件。

JavaScript代碼:

varscrolling=false;

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

if(!scrolling){

scrolling=true;

(!window.requestAnimationFrame)

?setTimeout(autoHideHeader,250)

:requestAnimationFrame(autoHideHeader);

}

});

autoHideHeader()函數(shù)根據(jù)用戶向上或者向下滾動(dòng)頁(yè)面來(lái)處理隱藏/顯示導(dǎo)航。

以上就是關(guān)于扣丁學(xué)堂HTML5培訓(xùn)之頁(yè)面滾動(dòng)時(shí)自動(dòng)顯示隱藏導(dǎo)航效果（jQuery）的詳細(xì)介紹，最后想要工作不累就要不斷的提升自己的技能，請(qǐng)關(guān)注扣丁學(xué)堂官網(wǎng)、微信等平臺(tái)，扣丁學(xué)堂IT職業(yè)在線學(xué)習(xí)教育平臺(tái)為您提供權(quán)威的HTML5視頻教程系統(tǒng)，通過(guò)千鋒扣丁學(xué)堂金牌講師在線錄制的第一套自適應(yīng)HTML5在線視頻課程系統(tǒng)，讓你快速掌握HTML5從入門到精通開發(fā)實(shí)戰(zhàn)技能。扣丁學(xué)堂H5技術(shù)交流群：751662650。