如何在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 它并不完全适用于布局，但它可以满足您的期望。我在你的html中添加了一个带有id和class类的div。然后我将背景设置为您对徽标的网址。我也默认将它设置为隐藏。当您滚动时，徽标会在您向上滚动到顶部时出现并消失。