以 http://www.alloyteam.com/ 為例子 我來給大家做出詳細解答
以下為初始演示

當滾動條滾動樣式如下

下面我就教你如何實現這個樣式

這是這個網站導航條的樣式 它並沒有設定背景顏色，只是因為固定定位，導航條在網頁不佔空間，使得它懸浮在下面輪播圖的上方，所以給人視覺一種透明效果；

接下來就是監測滾動條，你會發現滾動條滾動就會在原來的基礎上新加了個類 header-scrolled

而這個類的樣式如下圖
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20181126104748388.png
給設定了背景色白色，而且padding值也改變了 ，注意看之前.header 的樣式，是設定了這個-webkit-transition: all .4s ease-in-out；CSS3動畫的，所以在padding改變時候會有動畫過度；

$(window).scroll(function () {
        //$(window).scrollTop()這個方法是當前滾動條滾動的距離
        // 獲取滾動的高度
        var scrollHeight=$(window).scrollTop();
        if(scrollHeight > 0){
            $("header").addClass("header-scrolled");
        }
        if(scrollHeight == 0){
            $("header").removeClass("header-scrolled");
        }
});
 

只是監測滾動條，增加刪除header-scrolled類，而動畫過度是header寫了CSS3動畫樣式，由於新增header-scrolled加了背景色和改變的padding值，出現的對應的效果