CSS Change Background Color at Certain Point

Question

I would like the background of the entire site to change from white to black when a certain element comes into view. So when you scroll by the element the background transitions

Answer 1

I assume your real issue are the first to lines in your CSS which is not valid. Have a look at the reference. If you want to select all .colorChange inside of #pageWrapper use:

#siteWrapper .colorChange {}

Also remove the "#" in your HTML like so:

I also would recommend you two throttle your events, so that you do not listen to every scroll event, which could dramatically slow down your system, but every 50 seconds or so. Have a look at ScrollSpy or some jquery throtte plugin.