CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
A.Developer
A.Developer

Reputation: 21

Bootstrap: Fixed navigation does not works

I have this page and the navigation should be fixed but does not works. Could be a script problem? This is the 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');
   }
});

Upvotes: 1

Views: 41

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

Execute code at dom ready

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

Upvotes: 2

Benjamin Rasmussen
Benjamin Rasmussen

Reputation: 185

Look in the browser console. If you are in chrome: On Windows and Linux: Ctrl + Shift + J On Mac: Cmd + Option + J

You'll see that a lot of your javascript resources are not being loaded. Seeing as I dont see the JS code above in any of the files that ARE being loaded, I assume you've put it in "cbpAnimatedHeader.js" which is returning 404.

Upvotes: 0

Related Questions