Bootstrap фиксированный заголовок с jQuery-One-Page-Nav

Question

Я использую twitter bootstrap.

Я добавил это на свою страницу, чтобы сделать навигацию со свитком. <div class="nav-collapse collapse **navbar-fixed-top**">

Но я не могу представить его на месте с помощью css. Вы можете увидеть место, которое я хочу, удалив position:fixed.

Вторая проблема заключается в том, что при прокрутке страницы ссылки должны быть активными относительно того, в какой части я включен. Это как-то больше не работает.

Я использую jQuery One Page Nav Plugin и Twitter Bootstrap.

Link to live site

Answer 1

По умолчанию Bootstrap удаляет фиксированное положение для планшетов и телефонов. Если вы хотите переопределить это, попробуйте:

Редактировать

@media (max-width: 979px){ 

    .navbar-fixed-top, .navbar-fixed-bottom { 
    position: fixed; 
    } 

} 

Для ваших ссылок меню, в настоящее время у вас есть:

<a href="#section-2">Cv</a> 

, который связывается с

<div class="full-2"> 
<div class="container-narrow"> 
<div class="section" id="section-2"> 
<section> 
.... 

Try изменяя это на:

Если это не сделать трюк, переместить раздел DIV, как показано ниже:

<section id="section-2"> 
<div class="full-2"> 
<div class="container-narrow"> 

.... 

Update

с синтаксисом в вашей @media CSS не совсем корректно (моя ошибка раньше) , что вы хотите:

/*By default, Bootstrap removes the fixed position for tablets and phones*/ 
@media (max-width: 979px){ 

.navbar-fixed-top, .navbar-fixed-bottom { 
position: fixed; 
    } 
} 

Затем в HTML вам нужно добавить дополнительный класс в навигационной панели, чтобы указать, что вы хотите, проставленный:

<div id="top-nav" class="navbar navbar-fixed-top"> 

После того, как вы это сделали, все работает хорошо, и вам просто нужно будет сыграть с дизайном выпадающих навигационных ссылок.

Смотреть это жить: http://jsfiddle.net/panchroma/KbMvX/ и http://fiddle.jshell.net/panchroma/KbMvX/show/