Darkening <section> on one-page website

Question

I am a semi-noob at web dev, however I am either searching with the wrong terms or I am not a very proficient googler.

I am making a one page website and want the effect that when a new section comes into view scrolling down, that the new section will darken. I can achieve darkening on mouse over, but I want the currently visible section to always remain dark until navigating away from it, not only when the mouse is hovering over the section.

I am thinking it may have to be JS as I cannot seem to find what I need in CSS, but perhaps the collective mind can help!

Cheers!

Answer 1

This is a little push in the right direction: http://jsfiddle.net/f5w35qu8/1/

$(window).scroll(function () {
    var scrolled = $(window).scrollTop();
    if (scrolled > 10) {
        $('section:first').addClass('darker');
    }

    else $('section:first').removeClass('darker');
});