Bootstrap의 첨부 된 nav에 로고를 추가하는 방법

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

편집 :

당신은 자바 스크립트 같은 것을 할 수 있습니다

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

일부 변경 사항으로 jsfiddle을 업데이트했습니다 : Fiddle 완전히 포함 된 레이아웃으로 작동하지는 않지만 예상 한대로 작동합니다. 귀하의 html에 ID와 브랜드 클래스를 추가했습니다. 그런 다음 로고에 대한 배경 정보를 설정합니다. 또한 기본적으로 숨김으로 설정했습니다. 스크롤 할 때 맨 위로 위로 스크롤하면 로고가 나타나고 사라집니다.