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.

Answer 2

Binding the scroll to the window is a bad idea.

If you want to trigger a change on each section of the website have a look at jquery waypoints

http://imakewebthings.com/jquery-waypoints/

    $('.section').waypoint({handler: function() {
            $('.menu').css('background', '#ff3366');
        },
        offset: '50%'
    });

Hope this helps.

Answer 3

I think for your requirement https://github.com/Prinzhorn/skrollr is the way to go. It is a easy to implement library that relies on css transitions and does not require jquery

it does colors, paralax, animations and more.