Change color of text after 100% window height?

I have three divs which each are 100% of the browser window height and on the top right i have a fixed menu. The thing i want to do is to let the textcolor of the menu change upon entering the next div. How can I do this?

thanks in advance.

This might help:

hmm im still to nooby at js to grasp that. Could i make it so another class is added after i have scrolled 100% browser height and then remove that class after another 100% browser height?

Yeah, that’d probably work.
Grab the viewport height on load/resize, then when scrolling compare the scrollTop() value to multiples of his variable.

Here is the thing i want to archieve, except this is made with background images.

Hi there,

Did you forget the link, or what do you mean “here is the thing”?

yep (facepalm) … here it is:

Hi there,

That’s neat, but I meant something more like this:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Change background colour on scroll</title>

  <body style="background-color:red; padding:0; margin:0;">
  <div style="width:100%; height:5000px;"></div>
  <div style="position:fixed; top:15px; left:15px;">
    <p>Viewport height: <span id="height"></span>px</p>
    <p>Scroll position: <span id="position">0</span>px</p>
  <script src="" type="text/javascript"></script>
        var scroll_pos = 0,
            viewportHeight = $(window).height(),
            $position = $("#position");


        $(document).scroll(function() {
          scroll_pos = $(this).scrollTop();
          if(scroll_pos < viewportHeight) {
            $("body").css('background-color', 'red');
          } else if(scroll_pos > viewportHeight && scroll_pos < 2*viewportHeight) {
            $("body").css('background-color', 'blue');
          } else if(scroll_pos > 2*viewportHeight && scroll_pos < 3*viewportHeight) {
            $("body").css('background-color', 'green');
          } else if(scroll_pos > 3*viewportHeight && scroll_pos < 4*viewportHeight) {
            $("body").css('background-color', 'yellow');
          } else {
            $("body").css('background-color', 'pink');