如何在 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 和类别的 div。然后我将背景设置为您为徽标设置的网址。我还默认将其设置为隐藏。当您滚动时，徽标应该会出现并在您向上滚动到顶部时消失。