I'm using jQuery Smooth Scroll on a one page website, and each "panel" has the nav at the top right. I would like to show the currently selected "panel" by highlighting that selection in the nav each time the user changes "panels". Is there a somewhat simple way already built into the plugin to do that? Thanks!
Assuming each of your nav button share the same class (such as .navbutton
) but have a different id (such as #nav1
,#nav2
,#nav3
), you could create a new class in your css (lets call it .selected
)
.selected {
background: red;
}
Then, when you execute your code that does your scrolling, also do this:
$(".navbutton").each(function(){ $(this).removeClass('selected'); }); // remove selected from all Nav Buttons
$("#nav1").addClass('selected'); // Add class to single Nav Button (assuming nav1 was clicked)