Bootstrap with page-scroll navbar shrink

Question

I'm using the Bootstrap Freelancer one-page Template. But I want to do a seperate .html page for my Products.

<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> 

When I navigate from the Produkte.html back to my index.html directly in a "section" via

<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>

The navbar collapses only some times, and I can see the #home im my url bar. I don't got any other idea on how to do this?!

Update: I tested this one here:

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

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

When I jump back to my index.html and VISIBLE is shown, the navbar collapses, but this happens only at 50% of the clicks.