the code works fine, but I need help to make some improvements or just optimize JS code.
-
if I am in #item1 and press to go to #item6 add .active class to #item6 instead of add .active and remove from #item1 … #item2 … #item3 … until I get to #item6
-
when i am in #item6 and I use scroll not click to go to #item5(or #item4) remove .active class from #item6 and use default scroll to .active
Hope you understand me. Sorry for my English. Thanks.
<header id="header">
<div id="header-menu">
<ul class="menu">
<li><a class="menu-item-1" href="#item1">Item1</a></li>
<li><a class="menu-item-2" href="#item2">Item2</a></li>
<li><a class="menu-item-3" href="#item3">Item3</a></li>
<li class="centered-logo no-padding">
<a href="#home">
<img class="logo" src="images/logo.png" />
</a>
</li>
<li><a class="menu-item-4" href="#item4">Item4</a></li>
<li><a class="menu-item-5" href="#item5">Item5</a></li>
<li><a class="menu-item-6" href="#item6">Item6</a></li>
</ul>
</div>
</header>
$( document ).ready(function()
{
$(window).scroll(function()
{
var Scroll = $(window).scrollTop() + 1;
SectionOneOffset = $('#item1').offset().top;
SectionTwoOffset = $('#item2').offset().top;
SectionThreeOffset = $('#item3').offset().top;
SectionFourOffset = $('#item4').offset().top;
SectionFiveOffset = $('#item5').offset().top;
SectionSixOffset = $('#item6').offset().top;
if (Scroll >= SectionOneOffset) { // If you have scrolled past section one do this.
$(".menu-item-1").addClass("active"); // Adds class of current-menu-item to the menu item with a class of menu-item-1
} else { // If you have not scrolled section one do this.
$(".menu-item-1").removeClass("active"); // Removes class of current-menu-item to the menu item with a class of menu-item-1
}
if (Scroll >= SectionTwoOffset) { // If you have scrolled past section two do this.You can duplicate this for as many sections as you want.
$(".menu-item-2").addClass("active"); // Adds class of current-menu-item to the menu item with a class of menu-item-2
$(".menu-item-1").removeClass("active"); // Removes class of current-menu-item to the menu item with a class of menu-item-1
} else { // If you have not scrolled section two do this.
$(".menu-item-2").removeClass("active"); // Removes class of current-menu-item to the menu item with a class of menu-item-2
}
if (Scroll >= SectionThreeOffset) {
$(".menu-item-3").addClass("active");
$(".menu-item-2").removeClass("active");
} else {
$(".menu-item-3").removeClass("active");
}
if (Scroll >= SectionFourOffset) {
$(".menu-item-4").addClass("active");
$(".menu-item-3").removeClass("active");
} else {
$(".menu-item-4").removeClass("active");
}
if (Scroll >= SectionFiveOffset) {
$(".menu-item-5").addClass("active");
$(".menu-item-4").removeClass("active");
} else {
$(".menu-item-5").removeClass("active");
}
if (Scroll >= SectionSixOffset) {
$(".menu-item-6").addClass("active");
$(".menu-item-5").removeClass("active");
} else {
$(".menu-item-6").removeClass("active");
}
});
});