0

当用户滚动时，我正在尝试将较小版本的网站徽标添加到 Bootstrap 的附加导航栏。

这是我的网站。

到目前为止，这就是我一直在做的事情......我尝试使用较小的徽标添加到 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

4

1 回答 1

2

看起来你可以通过几种不同的方式来做到这一点。

可能想尝试查看其中一些建议：

CSS 方法

HTML 方法

编辑：

您可以在 javascript 中执行以下操作：

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

我已经更新了您的 jsfiddle 并进行了一些更改：Fiddle 它并不能完全使用包含的布局，但它可以满足您的期望。我在您的 html 中添加了一个带有品牌 ID 和类别的 div。然后我将背景设置为您为徽标提供的网址。我还默认将其设置为隐藏。当您滚动时，徽标应该会出现并在您滚动回顶部时消失。

于 2014-03-12T19:18:22.420 回答