I have a fixed navbar on my site using pretty much all Bootstrap defaults. I have a bit of jQuery for some one page navigation scrolling:
$(function() {
$("a.page-scroll").bind("click", function(e) {
var t = $(this);
$("html, body").stop().animate({
scrollTop: (parseInt($(t.attr("href")).offset().top)-40)
}, 1500, "easeInOutExpo");
e.preventDefault()
})
});
This works ok. I add the -40 to the offset top to ensure there is enough space between the header of each section and the fixed navbar.
My html looks a bit like this:
<section id="pricing" class="pricing-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
So the nav adds the active class based on the #pricing section offset top. This is fine if I am just scrollling. But when I click on the nav link and use the jQuery to scroll to that point, the -40 I have added means it stops before the offset triggers the active class to be added.
This is what I mean:
So how can I adjust when the bootstrap active class is added to match the -40px offset?
SOLUTION:
So simple. Found the answer here: How do I set the offset for ScrollSpy in Bootstrap?. I just needed to adjust the scroll spy data in my body tag like so:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top" data-offset="40">
Note the data-offset="40" fixed the problem straight away.
