Upped the version to 1.0.3. Moved the scrollTop limiter to the Frame Loop.

Author: RobertoGonzalez

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "midnight",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Switch fixed headers on the fly",
   "main": "midnight.jquery.js",
   "homepage": "https://github.com/Aerolab/midnight.js",

index.html

@@ -67,7 +67,7 @@
 
 
   <div class="top-links" data-midnight="white">
-    <a class="button" href="https://aerolab.github.io/midnight.js/midnight.jquery.js" download>Download</a>
+    <a class="button" href="https://aerolab.github.io/midnight.js/midnight.jquery.min.js" download>Download</a>
     <a class="button button-github" href="https://github.com/Aerolab/midnight.js" target="_blank">Fork on GitHub</a>
   </div>
 
@@ -172,7 +172,7 @@ <h2>The jQuery Plugin</h2>
         <p>To make everything work, just load midnight (and jQuery) and initialize it. We take care of the rest.</p>
       </div>
 
-      <pre class="line-numbers wow fadeInRight"><code class="language-markup">&lt;script src="https://github.com/midnight.jquery.js"&gt;&lt;/script&gt;
+      <pre class="line-numbers wow fadeInRight"><code class="language-markup">&lt;script src="https://github.com/midnight.jquery.%3Cspan%20class="x x-first x-last">min.js"&gt;&lt;/script&gt;
 &lt;script&gt;
 // Start midnight
 $(document).ready(function(){
@@ -224,7 +224,7 @@ <h2>Further customization</h2>
 
       <div class="container">
         <div class="buttons wow fadeIn">
-          <a class="button" href="https://aerolab.github.io/midnight.js/midnight.jquery.js" download>Download</a>
+          <a class="button" href="https://aerolab.github.io/midnight.js/midnight.jquery.min.js" download>Download</a>
           <a class="button" href="https://github.com/Aerolab/midnight.js" target="_blank"><i class="icon-github"></i> Fork on GitHub</a>
         </div>
       </div>
@@ -243,7 +243,7 @@ <h2>Further customization</h2>
   <script src="assets/js/prism.js"></script>
   <script src="assets/js/wow.min.js"></script>
   <script src="assets/js/viewport-units-buggyfill.js"></script>
-  <script src="midnight.jquery.js"></script>
+  <script src="midnight.jquery.min.js"></script>
   <script>
 
 

midnight.jquery.js

@@ -1,5 +1,5 @@
 /*!
- * Midnight.js 1.0.2
+ * Midnight.js 1.0.3
  * jQuery plugin to switch between multiple fixed header designs on the fly, so it looks in line with the content below it.
  * http://aerolab.github.io/midnight.js/
  *
@@ -37,6 +37,7 @@
 
       // Scroll Cache
       var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      var documentHeight = $(document).height();
 
       // Cache all the switchable headers (different colors)
       var $originalHeader = $(this);
@@ -232,6 +233,8 @@
 
       var recalculateSections = function(){
 
+        documentHeight = $(document).height();
+
         // Cache all the sections and their start/end positions (where the class starts and ends)
         sections = [];
 
@@ -260,7 +263,7 @@
         scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
         // Some browsers (e.g on OS X) allow scrolling past the top/bottom.
         scrollTop = Math.max(scrollTop, 0);
-        scrollTop = Math.min(scrollTop, $(document).height());
+        scrollTop = Math.min(scrollTop, documentHeight);
 
         // Get the header's position relative to the document (given that it's fixed)
         var headerHeight = headerInfo.height;

midnight.jquery.min.js

@@ -27,6 +27,7 @@
 
       // Scroll Cache
       var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      var documentHeight = $(document).height();
 
       // Cache all the switchable headers (different colors)
       var $originalHeader = $(this);
@@ -222,6 +223,8 @@
 
       var recalculateSections = function(){
 
+        documentHeight = $(document).height();
+
         // Cache all the sections and their start/end positions (where the class starts and ends)
         sections = [];
 
@@ -248,6 +251,9 @@
 
         // Check classes are currently active in the header (including the current percentage of each)
         scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+        // Some browsers (e.g on OS X) allow scrolling past the top/bottom.
+        scrollTop = Math.max(scrollTop, 0);
+        scrollTop = Math.min(scrollTop, documentHeight);
 
         // Get the header's position relative to the document (given that it's fixed)
         var headerHeight = headerInfo.height;

midnight.jquery.src.js

@@ -1,6 +1,6 @@
 {
   "name": "Midnight.JS",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A jQuery plugin to switch fixed headers on the fly",
   "devDependencies": {
     "gulp": "^3.8.8",