如何将徽标添加到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。然后，我将背景设置为您拥有徽标的网址。我也将它设置为默认隐藏。当您滚动时，徽标会出现并消失，当您向后滚动到顶部时。