jQuery滚动页面时显示(隐藏)导航条效果

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

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

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

先来看看演示Demo:

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

创建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;top0;当用户开始向下滚动页面时,用.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:

Demo 下载:

Demo 下载

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

0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论