bootstrap scrollspy выделяет последнюю кнопку навигационной ссылки после загрузки

Я построил вверху панель навигации с 5 ссылками. На самой странице я добавил 5 секций с id по названию после тега # в элементе. Проблема в том, что подсвечивается последняя кнопка навигационной ссылки (класс 'active' был добавлен к ней во время выполнения в самом начале, хотя в самом коде первый элемент навигационной панели установлен как "активный". У меня последняя версия начальной загрузки v2.0.4. Что случилось ?

<div class="navbar" id="MenuBar">
    <div class="topHeadContentLogo"></div>
    <ul class="nav nav-pills" id="MenuUl">
        <li class="active"><a href="#Weekly">Weekly</a></li>
        <li class=""><a href="#Post">Post</a></li>
        <li class=""><a href="#Audience">Audience</a></li>
        <li><a href="#Website">Website</a></li>
        <li><a href="#FAQ">FAQ</a></li>
    </ul>
</div>

<div id="contentDiv">
    <section id="Weekly">
        <h1>weekly</h1>
    </section>

    <section id="Post">
        <h1>Post</h1>
    </section>

    <section id="Audience">
        <h1>Audience</h1>
    </section>

    <section id="Website">
        <h1>Website</h1>
    </section>

    <section id="FAQ">
        <h1>FAQ</h1>
    </section>
</div>



$('#MenuBar').scrollspy(); after document ready