Creating a single page navigation with automatic active classes and smooth scroll is functioning properly, but I encountered an issue where the fixed navigation covers my headings slightly after scrolling.
To address this problem, I included 'top - 75' in my code. However, this adjustment caused another issue where the previous section receives the active class instead of the one currently in view while scrolling to a specific section.
var links = $('.nav').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
slide.waypoint(function (event, direction) {
dataslide = $(this).attr('data-slide');
if (direction === 'down') {
$('.nav li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
} else {
$('.nav li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
});
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.nav li[data-slide="1"]').addClass('active');
$('.nav li[data-slide="2"]').removeClass('active');
}
});
function goToByScroll(dataslide) {
htmlbody.animate({
scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top - 75
}, 1000, 'swing');
}
links.click(function (e)
{
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});