很多時候你會看到頁面上有一個始終固定在網頁頂部的導航選單，當頁面向下滾動的時候，導航選單動態隱藏，頁面滾動到頂部時，導航選單動態顯示，淘寶也採用過此效果，很不錯，當然，裡面使用了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>