Change CSS on scroll

Yes this needs some javascript to listen to the scroll and compare current position to your tracked elements. My approach (if not using a plugin), is to initialize an event listener object..and then you can just do whatever when it hits those events.

See quick example here: http://codepen.io/cjm771/pen/xohBd

//on dom load we initalize the changeMenuColor operation
//now we just need to listen for the evemt amd do whatrever
$(function(){
   changeMenuColor.init();
   $("#p1").on("isOnElement.changeMenuColor", function(){
     console.log("im on page 1");
     $(".menu").removeClass("invert");
   });
  $("#p2").on("isOnElement.changeMenuColor", function(){
       console.log("im on page 2");
      //lets invert color
      $(".menu").addClass("invert");
   });
  $("#p3").on("isOnElement.changeMenuColor", function(){
       console.log("im on page 3");
       //lets invert color
      $(".menu").addClass("invert");
   });
});

There are a bunch of ways to do this effect....if its involving scroll, you need javascript....waypoints.js is great for this..very simple

define a waypoint

$('you put the object that you want to trigger the css change here...when this object hits the top of the viewport').waypoint(function(){ $('this is the object your changing the css on').css("color", "red"); });

hope this helps

Adding a fixed postion to the menu could be enough, but that depends on your code. For changing the color, you will have to use jQuery. I was going to create a fiddle for you, but it seems the website is down at the moment. Just do a Google search for 'Change color jQuery scroll'. You should find enough examples with explantion on how to implement it.