Bootstrap с уменьшением панели навигации при прокрутке страницы

Я использую одностраничный шаблон Bootstrap Freelancer. Но я хочу сделать отдельную страницу .html для своих продуктов.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="page-scroll">
                    <a href="#home">Home</a>
                </li>
                <li class="page-scroll">
                    <a href="#ueberuns">&Uuml;ber uns</a>
                </li>                    
                <li class="page-scroll">
                    <a href="Produkte.html">Produkte</a>
                </li> 

Когда я перехожу от Produkte.html обратно к моему index.html непосредственно в «разделе» через

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="page-scroll">
                    <a href="index.html #home">Home</a>
                </li>

Панель навигации рушится только несколько раз, и я вижу #home в моей панели URL. У меня нет другой идеи о том, как это сделать?!

Обновление: я тестировал это здесь:

function onScreen(){
var markerPos = $('#home').offset().top;
var winScroll = $(document).scrollTop();
var winH      = $(window).height();

if( winScroll+winH >= markerPos){
$(".navbar-collapse");
console.log('VISIBLE!');
}
};

Когда я возвращаюсь к своему index.html и отображается VISIBLE, панель навигации рушится, но это происходит только при 50% кликов.