jQuery实现页面滚动时顶部动态显示隐藏

很多时候你会看到页面上有一个始终固定在网页顶部的导航菜单，当页面向下滚动的时候，导航菜单动态隐藏，页面滚动到顶部时，导航菜单动态显示，淘宝也采用过此效果，很不错，当然，里面使用了CSS3动画效果，不支持低版本浏览器。代码相当的简单，只需几行就搞定。

<div class="nav-top"></div>

<style>
    .nav-top{
        background: #f7f7f7;
        color:white;
        font-size:24px;
        padding:30px;
        text-align:center;
        position:fixed;left:0;top:-93px;
        width:100%;
        z-index: 1;
        transition: top .5s;
        border-bottom: 1px solid #dadada;
        box-shadow: 0 2px 4px rgba(0,0,0,.04);
    }
</style>

<script>
    $(window).scroll(function(){
        let winHeight = $(window).scrollTop();
        if(winHeight>100){
            $(".nav-top").animate({
                top:'0px'
            },5)
        }else{
            $(".nav-top").animate({
                top:'-93px'
            },5)
        }
    })
</script>