Bootstrap твиттер фиксированной верхней меньше меню навигации

Question

Это возможно даже с помощью Twitter Bootstrap http://www.usatoday.com/opinion/

Когда вы прокрутите вниз, только часть меню должны оставаться прикрепленными на вершине? Если у кого-то есть удобная версия jsfiddle, было бы очень приятно.

Answer 1

Вы можете заставить его работать, взяв навигационную панель и используя affix plugin. У меня есть (очень грубый) рабочий пример здесь: http://bootply.com/87472. Важные биты в CSS:

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 
} 

бит в HTML вам нужно:

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

Как уже упоминалось выше, data-offset-top должна соответствовать общей высоты любого элемента сидит над вашей навигационной панели.

Что касается фантастических эффектов, я бы предложил вам проверить css transitions, чтобы эта магия произошла.