I'm trying to implement Bootstrap Scrollspy on a website I'm working on but no matter what I do, I can't seem to get it to work (or do anything for that matter).
The website can be viewed at http://thecreativecompany.stage.webcomm.com.au/
Here's my JavaScript:
$(document).ready(function () {
var offset_height = $("nav").height();
$('#nav-wrapper').height(offset_height);
$("nav").affix({
offset: $("nav").position()
});
$('body').scrollspy({
target: '#nav-menu',
offset: offset_height
});
$('#menu li a').click(function (event) {
var scrollPos = $('body').find($(this).attr('href')).offset().top - (offset_height - 1);
$('body,html').animate({
scrollTop: scrollPos
}, 500);
return false;
});
});
I believe you're missing the
.nav
class in your menu. From the docs:So just add the class to your menu
<ul>
:Also, the result you'll get from the scrollspy plugin is an
.active
class being added to your list items, so I'm assuming you'll want to add a rule like this one to your CSS to go with your current styles: