0

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!

TimmehNZ
  • 91
  • 5
  • Might help...http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433 – Waxi Jan 24 '15 at 16:19
  • Agree with @slime on which Javascript handler to use. Then to actually darken your element, I would recommend making a CSS class for the darkened state, then applying that class in the Javascript handler. (E.g. `element.className = 'darken';`.) – Jonathan Jan 24 '15 at 16:27

1 Answers1

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');
});
Michelangelo
  • 5,888
  • 5
  • 31
  • 50