如何將徽標添加到Bootstrap的加標導航

Question

我試圖在用戶滾動時將我的站點徽標的較小版本添加到Bootstrap添加的導航欄中。

這是我的site。

這是我到目前爲止一直在努力的工作......我嘗試添加到帶有較小徽標的nav.affix，但它沒有奏效。我在正確的道路上嗎？

#nav.affix { 
position: fixed; 
top: 0; 
width: 100%; 
z-index:10; 
background: rgb(255, 255, 255) transparent; 
background: rgba(255, 255, 255, 0.8); 
} 
#nav #nav-img { 
background-image:url(http://static.tumblr.com/bw1wxme/rOYn2c6na/logo-small.jpg); 
} 
#nav.affix #nav-img { 
display:inline-block; 
} 
#sidebar.affix-top { 
position: static; 
} 
#sidebar.affix { 
position: fixed; 
top: 180px; 
} 

這裏是JSfiddle

Answer 1

看起來像你可以做一些不同的方式。

可能想嘗試尋找一些建議：

CSS Approach

HTML Approach

編輯：

你可以做這樣的事情在JavaScript：

$(window).scroll(function(){ 
    var height = $(this).scrollTop(); 
    var brand = $("#brand"); 
    if (height > 100){ 
    brand.show(); 
    } 
    else{ 
     brand.hide(); 
    } 
}); 

我已更新您的jsfiddle，並做了一些更改：Fiddle 它不完全適用於包含佈局，但它完全符合您的期望。我在品牌的id和class中爲您的html添加了一個div。然後，我將背景設置爲您擁有徽標的網址。我也將它設置爲默認隱藏。當您滾動時，徽標會出現並消失，當您向後滾動到頂部時。