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

介绍一个简单的导航效果，当用户向下滚动页面时自动隐藏导航，在用户向上滚动页面时自动显示导航，支持IE9+，Chrome，Safari，FireFox…

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

先来看看演示Demo：

• 简单的导航
• 主导航 + 子导航
• 主导航 + 大Banner + 子导航

这种交互现在比较常见，甚至在一些知名网站上都有应用。下面我们来看看简单的实现：

创建HTML结构

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

<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。HTML 代码:

<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 元素。HTML 代码:

 
<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 元素。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 代码:

 var scrolling = false;
$(window).on('scroll', function(){
    if( !scrolling ) {
        scrolling = true;
        (!window.requestAnimationFrame)
            ? setTimeout(autoHideHeader, 250)
            : requestAnimationFrame(autoHideHeader);
    }
}); 

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

演示与下载

演示Demo：

• 简单的导航
• 主导航 + 子导航
• 主导航 + 大Banner + 子导航

Demo 下载：

Demo 下载

文章主要内容和Demo来自：https://www.css88.com/archives/7883/