4-4 調整選單

當選單往下滾動時，選單變成白底，如果想要變成黑底白字，應該怎麼做？

1. 這個選單調用了「bootstrap 的 affix.js」插件
2. 頁面加載完畢後，應用affix效果的內容會增加一個.affix-top樣式類
3. 當頁面向下滾動了top的距離時，.affix-top切換成.affix類
4. 頁面滾動到離底部距離為bottom時，.affix類切換成.affix-bottom
5. 我們根據需要定義這三個類的樣式就好了。
6. 第2、3、4可以用chrome 的開發工具觀看，因為我們把選單固定在上方，所以看不到.affix-bottom
7. CSS3 RGBA 顏色值是這樣規定的：rgba(red, green, blue, alpha)。alpha 參數是介於0.0（完全透明）與1.0（完全不透明）的數字。
8. style.css

   .navbar-default.affix {
       background: rgba(51, 51, 51, 0.8);
       border-width: 0 0 1px;
       border-color: rgba(255,255,255,.3);
   }
   
   .navbar-default.affix .nav>li>a, .navbar-default.affix .nav>li>a:focus {
       color: rgba(255,255,255,.7);
   }

    

9. creative.js

   // Offset for Main Navigation
       $('#mainNav').affix({
           offset: {
               top: 100
           }
       })