menu background change color on scroll

Question

What I am trying to do is fade the background of my menu from transparent to light grey when the user reaches the next section of the site. I\'ve searched high and low for a

Answer 1

Here is a fiddle of how to add classes to elements on certain scroll positions (a basic way). Obviously, you can adjust it from colors to opacity or anything. Please see that this requires jquery.

But, the reason you haven't been able to have this work is because of the way your CSS is set up. You have the contents inside of your header with the position fixed, instead of the .header itself being the element that should have position: fixed. The contents inside should not be fixed.