介绍一个简单的导航效果,当用户向下滚动页面时自动隐藏导航,在用户向上滚动页面时自动显示导航。
支持 IE9+,Chrome,Safari,FireFox…
自动显示隐藏导航这种交互出现已经有一段时间了,特别是在移动设备上。 这种 UX 模式背后的想法简单而有效:我们希望导航在我们需要的时候很方便的显示,当用户向下滚动页面时,导航会自动隐藏,为内容留出更多的空间。在用户向上滚动页面时,我们将他的行为理解为想要访问导航,所以我们把导航自动自动显示出来。
先来看看演示 Demo:
这种交互现在比较常见,甚至在一些知名网站上都有应用。下面我们来看看简单的实现:
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 下载
文章主要内容和 Demo 来自:https://codyhouse.co/gem/auto-hiding-navigation/
来源: http://www.css88.com/archives/7883