jQuery ScroolSpy

HTML

<script src="https://raw.githubusercontent.com/sxalexander/jquery-scrollspy/master/jquery-scrollspy.js"></script>
<div class="container">
    <div class="content">
        <div class="row">
            <div class="span16">
                 <h2>Scroll down and see the color change !</h2>

                <div id="white" class="color">
                     <h2>The White Team</h2>

                </div>
                <div id="red" class="color">
                     <h2>The Red Team</h2>

                </div>
                <div id="blue" class="color">
                     <h2>The Blue Team</h2>

                </div>
                <div id="green" class="color">
                     <h2>The Green Team</h2>

                </div>
                <div id="black" class="color">
                     <h2>The Black Team</h2>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

/* Override some defaults */
      html, body {
          background-color: #eee;
      }
      .container {
          width:50%;
          margin:0 auto;
      }
      .container > footer p {
          text-align: center;
          /* center align it with the container */
      }
      /* The white background content wrapper */
      .content {
          background-color: #fff;
          padding: 20px;
          -webkit-border-radius: 0 0 6px 6px;
          -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
          -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
          -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
          box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
      }
      /* Styles you shouldn't keep as they are for displaying this base example only */
      .content .span10, .content .span4 {
          min-height: 500px;
      }
      /* Give a quick and non-cross-browser friendly divider */
      .content .span4 {
          margin-left: 0;
          padding-left: 19px;
          border-left: 1px solid #eee;
      }
      .color {
          height: 600px;
      }

JavaScript

$(document).ready(function () {
    $('.color').each(function (i) {
        var position = $(this).position();
        console.log(position);
        console.log('min: ' + position.top + ' / max: ' + parseInt(position.top + $(this).height()));
        $(this).scrollspy({
            min: position.top,
            max: position.top + $(this).height(),
            onEnter: function (element, position) {
                if (console) console.log('entering ' + element.id);
                $("body").css('background-color', element.id);
            },
            onLeave: function (element, position) {
                if (console) console.log('leaving ' + element.id);
            }
        });
    });
});