导航栏上拉显示下拉隐藏

最新推荐文章于 2023-12-06 10:13:25 发布

尾善爱看海

最新推荐文章于 2023-12-06 10:13:25 发布

阅读量5.7k

点赞数 4

分类专栏： js 文章标签： js html

本文链接：https://blog.csdn.net/weichangit/article/details/80251607

版权

js 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

一.需求说明

页面加载时导航栏悬浮在页面的上方，当滚动条向下滚动时导航栏隐藏，当滚动条向上滚动时导航栏显示。

二.原理讲解

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

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

最后写滚动条触发函数

三.事件函数讲解

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

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

四.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 导航栏样式 */
        .navigation{
            width: 100%;
            height: 50px;
            background-color: #d0f079;
            position: fixed;         
            left:0;
            top: 0;
            text-align: center;
            transition: top 0.5s;    
        }
        /* 隐藏效果 */
        .hide{
            top: -60px;
        }
        /* 内容栏样式 */
        .content{
            width: 80%;
            height: 5000px;
            margin: 60px auto;
            background-color: #41bcff;
            text-align: center;
        }

    </style>
</head>
<body>

<div class="navigation">导航菜单栏</div>
<div class="content">内容</div>
//此处jquery路径要替换
<script src="js/jquery-2.0.3.js"></script>
<script>
    $(function(){
        //页面初始化的时候，获取滚动条的高度（上次高度）
        var start_height = $(document).scrollTop();
        //获取导航栏的高度(包含 padding 和 border)
        var navigation_height = $('.navigation').outerHeight();
        $(window).scroll(function() {
            //触发滚动事件后，滚动条的高度（本次高度）
            var end_height = $(document).scrollTop();
            //触发后的高度 与 元素的高度对比
            if (end_height > navigation_height){
                $('.navigation').addClass('hide');
            }else {
                $('.navigation').removeClass('hide');
            }
            //触发后的高度 与 上次触发后的高度
            if (end_height < start_height){
                $('.navigation').removeClass('hide');
            }
            //再次获取滚动条的高度，用于下次触发事件后的对比
            start_height = $(document).scrollTop();
        });
    });
</script>
</body>
</html>