Как добавить логотип в прикрепленную навигацию Bootstrap

Я пытаюсь добавить уменьшенную версию логотипа моего сайта на прикрепленную панель навигации 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


twitter-bootstrap nav affix
person Social Monster    schedule 12.03.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Похоже, вы можете сделать это несколькими разными способами.

Возможно, вы захотите попробовать взглянуть на некоторые из этих предложений:

CSS-подход

HTML-подход

Изменить:

Вы можете сделать что-то подобное в javascript:

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

Я обновил ваш jsfiddle с некоторыми изменениями: Fiddle Он не полностью работает с включенным макетом, но он делает то, что вы ожидаете. Я добавил div в ваш html с идентификатором и классом Brand. Затем я установил фон на URL-адрес, который у вас есть для логотипа. Я также сделал его скрытым по умолчанию. При прокрутке логотип должен появляться и исчезать при прокрутке вверх.

person Rizowski    schedule 12.03.2014
comment
Я хочу, чтобы логотип появлялся на панели навигации после того, как люди начали прокручивать - person Social Monster; 12.03.2014