所属分类 WEB

导航动态显示隐藏

实现页面下滑时，固顶导航自动上滑隐藏。

实现页面上滑时，固定导航自动下拉显示。

需求的核心点在于判断页面当前为下滑还是上滑。

此外导航的显示与隐藏不能太过于突兀，采用平滑的动画效果更好。

CSS代码

/*动画样式*/
/*当元素产生变化时，0.6S内完成此变化*/
*{
    -webkit-transition:all .6s;
    -moz-transition:all .6s;
    -ms-transition:all .6s;
    -o-transition:all .6s;
    /*上面四条为了兼容各个内核的浏览器，实际仅需下方一条样式*/
    transition:all .6s;
}
/*固顶导航样式*/
/*这个样式在Headroom.js小插件一文中也用到了*/
header{
    height: 60px;
    width: 100%;
    background:#2c4762;
    position:fixed;
    /*顶部距离*/
    top: 0;
}
/*下滑触发追加的CSS*/ 
/*追加此样式时，导航在0.6S时间内从顶部上滑至-60px负距离*/
.down{
    /*顶部负距离，一般和导航高度一致*/
    top:-60px;
}

JS代码

$(function(){
    //记录顶部距离
    var windowTop=0;
    //触发页面滑动时会进入此方法
    $(window).scroll(function(){
        //获取当前可视区域距离页面顶端的距离
        var scrolls = $(this).scrollTop();
        //当scrolls>windowTop时，表示页面在向下滑动
        if(scrolls>=windowTop){
            //追加样式并记录新的距离
            $("#header").addClass("down");
            windowTop=scrolls;
        }else{
            $("#header").removeClass("down");
            windowTop=scrolls;
        }
    });
});

Headroom.js小插件

有一款轻量级、高性能的JS小工具（不依赖任何工具库），它能在页面滚动时做出响应。

Headroom.js 使得我们只需要极少的代码就能完成这项诉求。

其实现思路和尚未描述的一致。

实现原理

响应滚动事件的页面元素增加或删除一个CSS class，已达到导航栏的显示和隐藏。

<!-- 这三种状态均由headroom.js进行完成 -->
<!-- 初始状态 -->
<header class="headroom">
<!-- 向下滚动时 -->
<header class="headroom headroom--unpinned">
<!-- 向上滚动时 -->
<header class="headroom headroom--pinned">

Headroom调用方式

Headroom.js提供了多种调用方式，为了更能够浅显易懂的使用工具，米虫提供一个最简的Demo以便于理解。

米虫比较偷懒，直接用的Jquery的写法。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Headroom.js轻松实现导航动态显示隐藏DEMO - 米虫博客</title>
    <meta name="keywords" content="米虫,前端,DEMO">
    <meta name="description" content="Headroom.js轻松实现导航动态显示隐藏的DEMO">
</head>
<body>
    <style>
    /*导航的原始固顶样式*/
    .header
    {
        position: fixed;
        text-align: center;
        width: 100%;
        height: 50px;
        background: #333;
        color: #fff;
        line-height: 50px;
        font-size: 24px;
    }
    /*导航常规CSS*/
    .headroom
    {
        top: 0px;
        /*延时*/
        transition: all 1s;
    }
    /*导航下滚CSS*/
    .headroom--unpinned
    {
        top: -100px;
    }
    /*导航上滚CSS*/
    .headroom--pinned
    {
        top: 0px;
    }
    .body
    {
        padding: 100% 40px;
        text-align: center;
        background: #eee;
    }
    </style>
    <div id="header" class="header headroom">
        顶部导航
    </div>
    <div class="body">
        为了便于展示，正文区域可以设计高一些，可以上下拖动测试
    </div>
    <!-- 加载Jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- 加载Headroom -->
    <script src="https://cdn.bootcss.com/headroom/0.9.4/headroom.min.js"></script>       <script src="https://cdn.bootcss.com/headroom/0.9.4/jQuery.headroom.min.js"></script>
    <!-- 初始化头部 -->
    <script>
        $("#header").headroom();
    </script>
</body>
</html>