1 files changed, 101 insertions, 0 deletions
diff --git a/examples/test.html b/examples/test.html
new file mode 100644
index 0000000..f774f0f
--- /dev/null
+++ b/examples/test.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>JQuery Scrollspy demo</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le styles -->
+    <link href="bootstrap.css" rel="stylesheet">
+	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
+	<script type="text/javascript" src="../jquery-scrollspy.js"></script>
+	
+    <style type="text/css">
+    
+      /* Override some defaults */
+      html, body {
+        background-color: #eee;
+      }
+
+      .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; }  
+
+    </style>
+
+  </head>
+
+  <body>
+
+      <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>
+        	<script type="text/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);
+        					//	$('body').css('background-color','#eee');
+        					}
+        				});
+        			});
+        		});
+        	</script>
+          </div>
+        </div>
+      </div>
+
+    </div> <!-- /container -->
+
+  </body>
+</html>