我們平時上網看到許多網站當用戶向下拉動垂直滾動條時，網頁頂部的導航菜單固定不動，並且加入了不同的樣式屬性，顯得頁麵瀏覽非常講究、非常人性化。建網站時，這些屬於前端的範疇，技術上是如何實現的呢？

最簡單的實現方法就是使用JQuery，引入庫後可以很簡單的向網頁中某一個樣式類中加入或移除CSS類，再加上滾動條的位置判斷就可以完成：

<script>
    $(window).scroll(function () {
        //獲取滾動條位置
        var top = $(window).scrollTop();
        if(top > 10) {
            //判斷滾動條是否拉動，有向下拉就加入active樣式
            $('.header').addClass('active');
        } else {
            $('.header').removeClass('active');
        }
    });
</script>

至於要加入或移除什麽樣子的CSS屬性，就看你自由發揮.active樣式了。不要忘記在網頁頂端引用JQuery庫文件，不然沒有任何效果。