부트 스트랩 트위터 고정 위에 작은 탐색 메뉴

Question

당신이 아래로 스크롤 할 때이 가능하기 트위터 부트 스트랩 http://www.usatoday.com/opinion/

를 통해 만의 메뉴 부분이 상단에 부착 된 상태로 유지해야합니까? 누구든지 편리한 jsfiddle 버전을 가지고 있다면 정말 좋을 것입니다.

Answer 1

navbar를 사용하고 affix plugin을 사용하면 작동하게 할 수 있습니다. 여기에 (매우 거친) 작업 예제가 있습니다 : http://bootply.com/87472. 중요한 비트는 CSS에 다음 HTML에서

header {   //this is whatever is sitting above the navbar. 
    height:50px;  //this can be set to anything, just make it match 
        //the data-offset-top in the HTML (see below) 
}  
.affix { 
    width:100%;  //makes sure the "affixed" navbar stretches the full width 
    top:0;   //makes it stick to the top when it gets there. 
} 
.affix + p {  //this is whatever is sitting below the navbar 
    margin-top:70px; //set to the total height of your navbar 
} 

비트는 당신이 필요합니다

위에서 언급 한 바와 같이

<div class="navbar navbar-default" data-spy="affix" data-offset-top="50"> 

, data-offset-top이 당신의 메뉴 바 위에 앉아 어떤 요소의 전체 높이와 일치해야합니다.

멋진 효과는 마법을 실현하기 위해 css transitions을 확인해 보시기 바랍니다.