javascript - Bootstrap : Fixed navigation does not works

Question

我有this page并且导航应该是固定的但不起作用。可能是脚本问题？这是 HTML:

<div id="navbar" class="navbar-collapse collapse">
   <ul class="nav navbar-nav">
      <li class="page-scroll"><a href="http://develop.nowcommu.myhostpoint.ch/">Home</a></li>
      <li><a class="page-scroll" href="/architektur.html">Architektur</a></li>
      <li><a class="page-scroll" href="/ausstattung.html">Ausstattung</a></li>     
      <li><a class="page-scroll" href="/table.html">Wohnungen</a></li>
      <li><a class="page-scroll" href="/lage.html">Lage</a></li>
      <li><a class="page-scroll" href="/galerie.html">Galerie</a></li>
      <li><a class="page-scroll selected" href="/kontakt.html">Kontakt</a></li>             
   </ul>
</div><!--/.nav-collapse -->

JS:

var logoBarHeight = $('.logo-bar').height();
$(document).on('scroll', function() { 
   if($(document).scrollTop() > logoBarHeight) {
      $('#navbar').addClass('navbar-fixed-top');
   } else {
      $('#navbar').removeClass('navbar-fixed-top');
   }
});

Answer 1

在 dom 就绪时执行代码

<script> 
$(function(){
var logoBarHeight = $('.logo-bar').height();
$(window).on('scroll', function() { 
if($(window).scrollTop() > logoBarHeight){
$('#navbar').addClass('navbar-fixed-top');
} else {
$('#navbar').removeClass('navbar-fixed-top');
}
});
});

</script>