Is there a way to make the navigation highlight when a user clicks on it and also scrolls to the corresponding section? Currently, I am facing an issue where only the third navigation event highlights, most likely because when navigating to the fourth or fifth event the scroll bar is already at the bottom of the page. This causes events 4 and 5 to never reach the top, resulting in only event 3 being highlighted. I have tried using if statements to check if the clicked event is at the top and if the scrollbar is not at the bottom, but with no success.
To better demonstrate the issue, you can view this example. Clicking on option 5 does not trigger highlighting as expected.
$('.option').children('a').click(function() {
$('.option').css('background-color', '#CCCCCC;');
$(this).css('background-color', 'red');
var postId = $($(this).attr('href'));
var postLocation = postId.offset().top;
$(window).scrollTop(postLocation);
});
$(window).scroll(function() {
var scrollBar = $(this).scrollTop();
var allPosts = [];
var lastPost = allPosts.length - 1;
var windowHeight = $(window).height();
var bottomScroll = windowHeight - scrollBar;
$(".content").each(function(){
allPosts.push($(this).attr('id'));
});
for(var i = 0; i < allPosts.length; i++) {
var currentPost = "#" + allPosts[i];
var postPosition = $(currentPost).offset().top;
if (scrollBar >= postPosition){
$('.option').css('background-color', '#CCCCCC');
$('#nav' + allPosts[i]).css('background-color', 'red');
};
};
});