jquery 实现顶部导航下滑消失，上滑显示动画静态轮廓完成。想要在下滑的时候有动作产生，我们首先想到的是滚轮事件，其

首先定义一个导航栏

html

<div id="nav">导航栏</div>

css

#nav{
    background: #0aa0f5;
    height: 80px;
    position: fixed; /*绝对定位，可用"left", "top", "right"，"bottom" 控制*/
    top: 0px;
    width: 100%;
}

自行在下方添加足够多的模拟内容，满足鼠标滚轮下滑或者拖动滚动条的条件

静态轮廓完成。

想要在下滑的时候有动作产生，我们首先想到的是滚轮事件，其中 onmousewheel 事件对鼠标的滚轮有效，而对鼠标拖动右侧滚动条是无效的，这里我们选择对两种方式都有效的 onscroll 事件。

window.onscroll = function (e) {
    console.log(e);
}

从控制台获取属性 scrollTop 的值。

var scrollTop = e.target.scrollingElement.scrollTop;

滚动的过程中打印出该值可以帮助我们判断数值是否能支持接下来的动画。

用 scrollTop 此刻的值和上一刻比的大小来确定是上滑还是下滑，所以先定义一个全局变量，用来保存上一刻 scrollTop 的值。

scrollTopLast = 0;

if(scrollTop > scrollTopLast){
    console.log("向下滚动")
}else{
    console.log("向上滚动")
}

先在浏览器调试看是否正确，然后实现其中的样式改变。

if(scrollTop > scrollTopLast){
    console.log("向下滚动")
    $("#nav").css("transition", "0.5s")
	$("#nav").css("opacity", "0")    
}else{
    console.log("向上滚动")
    $("#nav").css("transition", "0.5s")
    $("#nav").css("opacity", "1")
}

使用 jquery 设置 div 的样式，opacity 表示透明度，使用 transition 过渡属性，分别用 0.5s 完成透明度从 0~1 和 1~0 的过渡。

最后要把 scrollTopLast 的值更新，为下一次滚动做准备。

scrollTopLast = scrollTop;

完整代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    </head>
    <style>
        #nav{
            text-align: center;
            background: #0aa0f5;
            height: 80px;
            position: fixed; /*绝对定位，可用"left", "top", "right"，"bottom" 控制*/
            width: 100%;
            top: 0px;
        }

        .content{
            height: 500px;
            background: #1eae9e;
        }
    </style>

    <script>
        var scrollTopLast = 0;
        window.onscroll=function(e){
            var scrollTop = e.target.scrollingElement.scrollTop;
            if(scrollTop > scrollTopLast){
                console.log("滑轮向下滚动");
                $("#nav").css("transition", "0.5s")
                $("#nav").css("opacity", "0")
            }else{
                console.log("滑轮向上滚动");
                $("#nav").css("transition", "0.5s")
                $("#nav").css("opacity", "1")
            }
            console.log(e.target.scrollingElement.scrollTop);
            scrollTopLast = scrollTop;
        }
    </script>
    <body>
        <div id="nav">导航栏</div>

        <div class="content">
            模拟内容
        </div>
        <div class="content">
            模拟内容
        </div>
        <div class="content">
            模拟内容
        </div>
        <div class="content">
            模拟内容
        </div>
        <div class="content">
            模拟内容
        </div>
        <div class="content">
            模拟内容
        </div>
        <div class="content">
            模拟内容
        </div>
    </body>
</html>

end