Question

I have a page that scrolls sideways and I have a floating menu. I want the text in the menu to invert the color that is under it. Is there a way to do that with HTML5, Javascript, and/or jQuery?

Added: How would you invert an image when it goes over different parts of the page? CSS?

This is the bit of CSS I use for the menu

body{
  background:#000;
  font-family:Georgia;
  font-size: 34px;
  font-style: italic;
  letter-spacing:-1px;
  width:12000px;
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
}
ul#banner{
  position: fixed;
  line-height: 45px;
  margin: 0 30px; padding: 0; 
}

Answer 1

step1. Get the position of your menu

step2. Remove your menu and get an element that is placed on the position

maybe you can use document.elementFromPoint

step3. Invert the element’s color and apply it on your menu

step4. Show your menu again

step5. Repeat it whenever you need to change menu’s color(scroll, etc.)