您的位置:首页 » 分类: HTML+CSS & jQuery & JavaScript & 实用函数方法 » 文章: 页面滚动时自动显示隐藏导航效果(jQuery)

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

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

介绍一个简单的导航效果,当用户向下滚动页面时自动隐藏导航,在用户向上滚动页面时自动显示导航。

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

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

发表评论

电子邮件地址不会被公开。 必填项已用*标注