jQuery实现视窗上、下滚动导航隐藏、出现【一】

最新推荐文章于 2022-11-10 18:48:05 发布

爱吃糖的小明

最新推荐文章于 2022-11-10 18:48:05 发布

阅读量537

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_45785873/article/details/105845541

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery视窗上、下滚动导航隐藏、出现【一】

实现的原理比较简单，即只需监听视口的滚动，获取到当前滚动条距离视口顶部的距离，再定义一个变量，用于判断当前高度和上一次的高度，当前高度大于上一次，说明向下滚动，导航隐藏；当前高度小于上一次高度，说明向上滚动，显示导航。显示和隐藏的效果可以通过animate()制定，或其他动画扩展。

初始状态：

向下滚动时：

向上滚动时：

<div class="header">The header or navigation elements go here...</div>
<div class="main">
    <p>Some content...</p>
</div>

<script>
    let previousTop=0;
    $(window).scroll(function () {
        let currentTop = $(window).scrollTop();
        if (currentTop < previousTop) {
            console.log("向上滚动："+currentTop);
            $(".header").show();
        } else {
            $(".header").hide();
            console.log("向下滚动："+currentTop);
        }
        previousTop = currentTop;
    })
</script>

   <style>
        .header {
            position: fixed;
            top: 0px;
            left: 9px;
            right: 9px;
            height: 50px;
            border: 1px dotted blue;
            background-color: #0e90d2;
            z-index: 999;
        }
        .main {
            height: 2000px;
            margin-top: 60px;
            border: 1px solid blue;
            width: 25%;
        }
    </style>