Change Active Menu as you Scroll with JQuery
Large scrolling websites and home pages are very popular right now because of industry leaders like Apple. I have had many clients want to link to different sections of their long scrolling page from the nav bar. This is not hard, it is simply accomplished by linking to an id of the element you want to scroll to. What was proving to be more difficult was figuring out how to style the active menu item differently than the rest so the end user could tell where they are at on these huge pages. Normally you would add a class of “current-list-item” to the nav link that is linked to the url you are on and style that with css however you wanted.
What is the problem?
The problem I kept running into is how do I add a class of “current-list-item” to the nav menu item that correlates with the section I am viewing when the URL doesn’t change.
What is the Answer?
The answer is to find the distance between the element in question and the top of the page. Then, using jQuery add a class to the nav menu that correlates when you have scrolled past that distance. Confused? Don’t worry, it is actually not that complicated!
Lets start with the jQuery:
$( document ).ready(function() { // Tells the function to wait to preform until everything on the page has loaded.
$(window).scroll(function() { // Says this function is preformed continuisly while scrolling.
var Scroll = $(window).scrollTop() + 1, // This variable finds the distance you have scrolled from the top.
SectionOneOffset = $('#section-one').offset().top, // This variable finds the distance between #section-one and the top. Replace #section-one with the ID of your section.
SectionTwoOffset = $('#section-two').offset().top; // This variable finds the distance between #section-two and the top. Replace #section-two with the ID of your section. You can duplicate this for as many sections as you want.
if (Scroll >= SectionOneOffset) { // If you have scrolled past section one do this.
$(".menu-item-1").addClass("current-menu-item"); // 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("current-menu-item"); // 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("current-menu-item"); // Adds class of current-menu-item to the menu item with a class of menu-item-2
$(".menu-item-1").removeClass("current-menu-item"); // 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("current-menu-item"); // Removes class of current-menu-item to the menu item with a class of menu-item-2
}
});
});
Now, all that is left is adding a little CSS to the class you created:
.current-menu-item {
color: white; /* Change white to whatever color you want your current menu item to be. You can add any styling you want here.*/
}
Thats all there is to it! I hope this helps.
Please leave comments with any questions or concerns. We love hearing from this community of creative individuals.
If you ever need any assistance with jQuery, CSS, HTML, PHP or WordPress just contact us. Serving people with integrity and finding elegant solutions to problems is what we do.
