網站程式設計-PHP
當選單往下滾動時，選單變成白底，如果想要變成黑底白字，應該怎麼做？
- 這個選單調用了「bootstrap 的 affix.js」插件
- 頁面加載完畢後，應用affix效果的內容會增加一個.affix-top樣式類
- 當頁面向下滾動了top的距離時，.affix-top切換成.affix類
- 頁面滾動到離底部距離為bottom時，.affix類切換成.affix-bottom
- 我們根據需要定義這三個類的樣式就好了。
- 第2、3、4可以用chrome 的開發工具觀看，因為我們把選單固定在上方，所以看不到.affix-bottom
- CSS3 RGBA 顏色值是這樣規定的：rgba(red, green, blue, alpha)。alpha 參數是介於0.0（完全透明）與1.0（完全不透明）的數字。
- 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);
}
- creative.js
// Offset for Main Navigation
$('#mainNav').affix({
offset: {
top: 100
}
})