Проблемы с аффиксом Bootstrap с липкой верхней навигацией

Поэтому у меня возникают проблемы при попытке реализовать боковую панель аффикса с липкой верхней навигацией, при прокрутке страницы или нажатии на боковую панель аффикса заголовок контента отключается на 40 пикселей (покрывается липкой верхней навигацией)

В основном контент не отображается должным образом в фиксированной навигации.

Любая идея здесь, как это исправить, будет высоко оценена!

Пример живого сайта здесь

http://www.melindayang.com/portfolio-carmax.html

Холодно внизу:

Липкая верхняя навигация

   <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="aboutme.html">About Me</a>
                </li>
                <li><a href="document/MYang Resume.pdf"target="_blank">Résumé</a>
                </li>
                <li><a href="http://melindamcdm.wordpress.com/" target="_blank">Blog</a>
                </li>
                </ul> 
        </div>

Боковая панель аффикса

<div class="col-xs-3" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125" id="myNav">
                <li class="active">
                    <a href="#section-1">Summary</a></li>
                <li><a href="#section-2">Research</a></li>
                <li><a href="#section-3">Ideation</a></li>
                <li><a href="#section-4">Prototype</a></li>
                <li><a href="#section-5">Results</a></li>
        </ul>
    </div>

Содержимое

 <div class="col-xs-9">
        <div id="section-1">
 <p> 12345, Content goes here</p>
</div>
  <div id="section-2">
 <p> 12345, Content goes here</p>
</div>
  <div id="section-3">
 <p> 12345, Content goes here</p>
</div>
  <div id="section-4">
 <p> 12345, Content goes here</p>
</div>
  <div id="section-5">
 <p> 12345, Content goes here</p>
</div>
</div>

JS

<script type="text/javascript">
$(document).ready(function(){
$("#myNav").affix({
    offset: { 
        top: 190 
    }
    });
});

css twitter-bootstrap affix
person Samuel Shen    schedule 13.05.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Добавьте отступы к телу

body
{
    padding: 70px 0 0 0;
}

Навигация Bootstrap имеет высоту 50 пикселей, плюс любое расстояние между контентом и навигацией, которое вы хотите.

Изменить: Проверьте здесь

person Luke    schedule 13.05.2014
comment
Я уже включил прокладку. Содержимое не перекрывается, моя проблема в том, что боковая панель аффикса неправильно указывает раздел. :/ - person Samuel Shen; 13.05.2014
comment
Вам нужно пересмотреть формулировку вашего вопроса. Мне кажется, что в основном контент не отображается должным образом при фиксированной навигации. относится к верхней навигации - person Luke; 13.05.2014