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>