I am facing an issue with my menu where the active class does not get added to the new menu item when clicked, despite being removed from the previous item.
Below is the code snippet:
<div class="row text-center" id="side-menu">
<nav>
<ol>
<li>
<a href="#page1" class="myanimate">
<span class="icons iconactive"><i class="fa fa-circle"></i></span>
<span class="namee">Home</span>
</a>
</li>
<li>
<a href="#page2" class="myanimate">
<span class="icons"><i class="fa fa-circle"></i></span>
<span class="namee">Design</span>
</a>
</li>
<li>
<a href="#page3" class="myanimate">
<span class="icons"><i class="fa fa-circle"></i></span>
<span class="namee">Review</span>
</a>
</li>
</ol>
</nav>
</div>
CSS for Active Menu:
.iconactive{
font-size: 15px;
color: brown;
margin-right: -3.2px;
}
Jquery Code Snippet:
$(document).ready(function() {
var scrollLink = $('.myanimate');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 2000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
if ( sectionOffset <= scrollbarLocation ) {
$(this).children('.icons').addClass('iconactive');
$(this).children('.icons').removeClass('iconactive');
}
});
});
});