介绍一个简单的导航效果,当用户向下滚动页面时自动隐藏导航,在用户向上滚动页面时自动显示导航。
支持IE9+,Chrome,Safari,FireFox…
自动显示隐藏导航这种交互出现已经有一段时间了,特别是在移动设备上。 这种UX模式背后的想法简单而有效:我们希望导航在我们需要的时候很方便的显示,当用户向下滚动页面时,导航会自动隐藏,为内容留出更多的空间。在用户向上滚动页面时,我们将他的行为理解为想要访问导航,所以我们把导航自动自动显示出来。
先来看看演示Demo:
这种交互现在比较常见,甚至在一些知名网站上都有应用。下面我们来看看简单的实现:
创建HTML结构
HTML结构基本结构如下,header.cd-auto-hide-header
元素包裹主导航元素nav.cd-primary-nav
,页面主要内容元素 main.cd-main-content
。
<header class="cd-auto-hide-header"> <div class="logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div> <nav class="cd-primary-nav"> <a href="#cd-navigation" class="nav-trigger"> <span> <em aria-hidden="true"></em> Menu </span> </a> <!-- .nav-trigger --> <ul id="cd-navigation"> <li><a href="#0">The team</a></li> <li><a href="#0">Our Services</a></li> <li><a href="#0">Our Projects</a></li> <li><a href="#0">Contact Us</a></li> </ul> </nav> <!-- .cd-primary-nav --> </header> <!-- .cd-auto-hide-header --> <main class="cd-main-content"> <!-- content here --> </main> <!-- .cd-main-content -->
如果页面有一个子导航,那么在 header
元素上添加一个 nav.cd-secondary-nav
。
<header class="cd-auto-hide-header"> <div class="logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div> <nav class="cd-primary-nav"> <a href="#cd-navigation" class="nav-trigger"> <span> <em aria-hidden="true"></em> Menu </span> </a> <!-- .nav-trigger --> <ul id="cd-navigation"> <!-- links here --> </ul> </nav> <!-- .cd-primary-nav --> <nav class="cd-secondary-nav"> <ul> <li><a href="#0">Intro</a></li> <!-- additional links here --> </ul> </nav> <!-- .cd-secondary-nav --> </header> <!-- .cd-auto-hide-header --> <main class="cd-main-content sub-nav"> <!-- content here --> </main> <!-- .cd-main-content -->
最后,有些页面可能主导航和子导航之间会放一张高大上的大尺寸 banner 图, 那么在 .cd-secondary-nav
元素的下方插入 .cd-hero
元素。
<header class="cd-auto-hide-header"> <div class="logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div> <nav class="cd-primary-nav"> <a href="#cd-navigation" class="nav-trigger"> <span> <em aria-hidden="true"></em> Menu </span> </a> <!-- .nav-trigger --> <ul id="cd-navigation"> <!-- links here --> </ul> </nav> <!-- .cd-primary-nav --> </header> <!-- .cd-auto-hide-header --> <section class="cd-hero"> <!-- content here --> </section> <!-- .cd-hero --> <nav class="cd-secondary-nav"> <ul> <!-- links here --> </ul> </nav> <!-- .cd-secondary-nav --> <main class="cd-main-content sub-nav-hero"> <!-- content here --> </main> <!-- .cd-main-content -->
添加样式
我们使用 .cd-auto-hide-header
类来定义主要样式。默认情况下,让 header.cd-auto-hide-header
元素固定定位position: fixed;
,top
为0
;当用户开始向下滚动页面时,用.is-hidden
类来隐藏可视区域上方的 header.cd-auto-hide-header
元素。
.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
事件。
var scrolling = false; $(window).on('scroll', function(){ if( !scrolling ) { scrolling = true; (!window.requestAnimationFrame) ? setTimeout(autoHideHeader, 250) : requestAnimationFrame(autoHideHeader); } });
autoHideHeader()
函数根据用户向上或者向下滚动页面来处理 隐藏/显示 导航。
演示与下载
演示Demo:
Demo 下载:
文章主要内容和Demo来自:
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂