本站使用了 Pjax 等基于 JavaScript 的开发技术,但您的浏览器已禁用 JavaScript,请开启 JavaScript 以保证网站正常显示!

jquery页面导航栏上拉显示下拉隐藏

小助手读文章 00:00 / 00:00

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

2)、页面打开时,先获取到页面的滚动条的初始高度(也可直接设为0),作用是初始化一个值,用于后面事件触发后进行判断。再获取导航栏的高度,作用是在初始位置进行下拉页面后,在什么时候触发导航栏隐藏,最后写滚动条触发函数。

3)、事件触发后,首先判断事件发生后滚动条的高度与导航栏的高度。当判断为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>

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.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>

版权属于:作者名称

本站采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载外,均为本站原创文章,转载前请务必署名


MIROC
一个有趣的IT科技网站

推广

 继续浏览关于 的文章

 本文最后更新于 2021/03/29 18:40:40,可能因经年累月而与现状有所差异

 引用转载请注明:MIROC > 前端技巧 > jquery页面导航栏上拉显示下拉隐藏

您当前正通过 IPv4 网络访问本站
您直接访问了本站,莫非记住了域名?