导航菜单下拉隐藏上拉显示源码及说明

一：效果描述

1、页面打开时，导航栏悬浮的页面上部
2、页面向下拉的时候导航栏隐藏
3、页面向上拉的时候导航栏出现。

二：原理讲解

页面打开时，先获取到页面的滚动条的初始高度（也可直接设为0），作用是初始化一个值，用于后面事件触发后进行判断。

再获取导航栏的高度，作用是在初始位置进行下拉页面后，在什么时候触发导航栏隐藏。

最后写滚动条触发函数

初始位置：页面打开时的位置

三：事件函数讲解

事件触发后，首先判断事件发生后滚动条的高度与导航栏的高度。
当判断为True时，导航条隐藏；当判断为False时，导航条出现。

然后判断本次事件导航条的高度与上次事件导航条的高度。
当上次高度，低于本次高度，说明用户在看下面的内容，导航栏隐藏
当上次高度，高于本次高度，说明用户在看上面的内容，导航栏出现

四：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 导航栏样式 */
        .navigation{
            width: 100%;
            height: 50px;
            background-color: #ac0e63;
            position: fixed;          /* 绝对定位（根据游览器边框定位） */
            left:0;
            top: 0;
            transition: top 0.5s;     /* 动画效果，top：显示的效果， 1s：是效果产生所花费的时间*/
        }

        /* 隐藏效果 */
        .hide{
            top: -60px;
        }

        /* 内容栏样式 */
        .content{
            width: 80%;
            height: 5000px;
            margin: 60px auto;
            background-color: #00a8a8;
        }

    </style>
</head>
<body>

    <div class="navigation"></div>
    <div class="content"></div>

    <script src="jquery-3.3.1.js"></script>
    <script>

        $(function(){
            var page_heig = $(document).scrollTop();            /* 初始化。用于第一次获取滚动条的高度 */
            var navigation = $('.navigation').outerHeight();    /* 获取该元素的高度 */

            $(window).scroll(function() {                       /* 滚动条触发事件 */
                var real_heig = $(document).scrollTop();        /* 事件触发后获取滚动条高度 */

                if (real_heig > navigation){                    /* 触发后的高度 与 元素的高度对比 */
                    $('.navigation').addClass('hide');          /* True 添加隐藏属性 */
                }else {
                    $('.navigation').removeClass('hide');       /* False 删除隐藏属性 */
                }

                if (real_heig < page_heig){                     /* 触发后的高度 与 上次触发后的高度 */
                    $('.navigation').removeClass('hide');       /* True 删除隐藏属性 */
                }
                page_heig = $(document).scrollTop();            /* 再次获取滚动条的高度，用于下次触发事件后的对比 */
             });
        });

    </script>
</body>
</html>

导航菜单下拉隐藏上拉显示源码及说明

猜你喜欢