Changing the appearance of navigation buttons in response to scrolling - html

Question

At the top of a page I'm building,
There will be some navigation buttons for navigating internally within the page.
When hovered over, a button will change its appearance (for instance, the font color and the color of the button itself will switch places).
How do I make the buttons change their appearance in the same way once the user scrolls down to the part of the page the button links to? For instance, there is a button labeled "Contact" that links links to the "Contact" section of the page. How should one change the button's font color from (for instance) white to blue and the background color from blue to white when the user scrolls down to that part of the page?
This was already discussed elsewhere, but I'm not yet familiar with headroom.js.

Answer 1

We could use a simple onclick color change behavior with jquery since everything else is already working fine. So what you could do is just change the color on click and remove it from the previous one simontaneously.
For the following HTML:
<nav>
<li id="1"><a href="#" >One</a></li>
<li id="2"><a href="#" >Two</a></li>
<li id="3"><a href="#" >Three</a></li>
<li id="4"><a href="#" >Four</a></li>
</nav>
If onclick color remains same for every nav item then
jQuery(document).ready(function($) {
$("nav li").each(function() {
$(this).click(function() {
$(this).prev().find("a").css("color", "red");
$(this).next().find("a").css("color", "red");
$(this).find("a").css("color", "blue");
});
});
});
If each color is differrent.
jQuery(document).ready(function($) {
$("#1").click(function() {
$(this).prev().find("a").css("color", "red");
$(this).next().find("a").css("color", "red");
$(this).find("a").css("color", "blue");
});
})
Instead of .css you can also add a class like
jQuery(document).ready(function($) {
$("nav li").each(function() {
$(this).click(function() {
$(this).prev().find("a").removeClass("active");
$(this).next().find("a").removeClass("active");
$(this).find("a").addClass( "active" );
});
});
});
https://jsfiddle.net/yuhazt0p/1/