Change color of text after 100% window height?

JavaScript
1

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.

2

This might help: http://upshots.org/javascript/jquery-test-if-element-is-in-viewport-visible-on-screen

3

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?

4

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

5

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

6

Hi there,

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

7

yep (facepalm) … here it is: http://askthecssguy.com/examples/fixedBackgroundImages/example02.html

8

Hi there,

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

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

  <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>
  </div>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      $(document).ready(function(){
        var scroll_pos = 0,
            viewportHeight = $(window).height(),
            $position = $("#position");

        $("#height").html(viewportHeight);

        $(document).scroll(function() {
          scroll_pos = $(this).scrollTop();
          $position.html(scroll_pos)
          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');
          }
        });
      });
    </script>
  </body>
</html>
9