title: fixed position menu with changing background colors
body: <p>I have inherited a project, and have some questions on how to resolve a particular issue. </p>
  
  <p>There is a fixed left sub-nav, seen below. As the user scrolls, there are 6-10 different "sections" that are stacked vertically. The top section has a background-image (seen below), while the remaining sections alternate between white &amp; various colors, such as: </p>
  
  <pre><code>section 1: background-image
  section 2: background-color: white
  section 3: background-color: blue
  section 4: background-color: white
  section 5: background-color: green
  ... etc
  </code></pre>
  
  <p>The customer wants the menu items to change colors based on what background each item is over at a given time (so as you scroll, it's changing item by item). As you can see in the image, when I scroll from the header to the first content section, I'm moving to a white background, so my menu is white text on a white background (the 5th menu item is moving into the white background). </p>
  
  <p>The guys that worked on this initially used jquery waypoint to trigger wholesale changes to the menu item color when a particular div scrolled to a certain location. This basically works - but only when the entire section is scrolled to the top of the menu (meaning the menu items are white-on-white until the last menu item is scrolled into the section). </p>
  
  <p>Any thoughts on how to handle this? </p>
  
  <p><img src="https://i.stack.imgur.com/r9LFU.png" alt="Fixed position image"></p>
  
  <p>[EDIT TO ADD]</p>
  
  <p>I thought I made this pretty clear above. We're already using jquery waypoints. The problem is, waypoint cannot trigger on each menu item (primarily since the menu items are not part of the ancestral tree of the content nodes, which prohibits me from passing in a context to the waypoint handler), unless I create a handler for the section div at each offset of every menu item (which are different for each page). This would result in a crazy amount of waypoint handlers being bound, which I don't think is ideal. </p>
  
  <p><a href="http://jsfiddle.net/jebNn/1/" rel="nofollow noreferrer">Here is an example</a> of what I'm describing. As you scroll, the menu items change all at once. You can see where this is a problem when you're scrolling down from the header into the first content section. The menu items are white. So is the background of the first content section. So until the waypoint is hit, the menu is effectively hidden. What I am looking to do is change the color of each menu item as it "enters" or "exits" a particular content div. I suppose I could do this on window.scroll, but that seems pretty expensive. Was hoping there's something I'm either missing with waypoints, or a better way to do this. </p>