getting everything working again.

components.html

@@ -44,7 +44,20 @@ base_url: "../"
   <![endif]-->
 
   <!-- Components -->
-  <div class="column-group">
+  <div class="docs-components column-group">  
+    <div class="phone-column column units-2 lg-units-5 pull-right">
+      <!-- In iPhone examples -->
+      <div class="iphone">
+        <div class="iphone-content">
+          <div id="iwindow">
+            <header class="bar-nav">
+              <h1 class="title">Title</h1>
+            </header>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="column units-2 lg-units-7">
       <!-- Bars -->
       <article class="component active" id="bars">
@@ -1049,21 +1062,7 @@ document
 window.addEventListener('push', myFunction);
 {% endhighlight %}
 
-          </article>
-        </div>
-          
-          <div class="phone-column column units-2 lg-units-5">
-            <!-- In iPhone examples -->
-            <div class="iphone">
-              <div class="iphone-content">
-                <div id="iwindow">
-                  <header class="bar-nav">
-                    <h1 class="title">Title</h1>
-                  </header>
-                </div>
-              </div>
-            </div>
-          </div>
-
-      </div>
+      </article>
     </div>
+  </div>
+</div>

docs-assets/css/docs.css

@@ -146,7 +146,15 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .platform-toggle {
+  z-index: 3;
   border-bottom: 1px solid #ddd;
+  background-color: #fff;
+}
+.platform-toggle.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
 }
 .platform-toggle .segmented-controller {
   max-width: 300px;
@@ -268,15 +276,10 @@ hr {
 }
 
 @media screen and (min-width: 768px) {
-  .phone-column {
-    position: relative;
-  }
-
   .iphone {
-    display: block;
-    position: absolute;
+    position: relative;
     top: 50px;
-    float: right;
+    display: block;
     width: 395px;
     height: 813px;
     margin-left: -13px;
@@ -384,6 +387,9 @@ hr {
   padding-right: 15px;
   float: left;
 }
+.column.pull-right {
+  float: right;
+}
 
 .column .column-group {
   margin-left: -15px;

docs-assets/js/docs.js

@@ -35,7 +35,7 @@ $(function() {
 
     iphone.initialLeft   = iphone.offset().left;
     iphone.initialTop    = iphone.initialTop || iphone.offset().top;
-    iphone.dockingOffset = ($(window).height() + $('.platform-toggle').height() - iphone.height())/2;
+    iphone.dockingOffset = ($(window).height() + $('.platform-toggle').outerHeight() - iphone.height())/2;
     checkDesktopContent();
     calculateScroll();
 
@@ -88,7 +88,7 @@ $(function() {
     if(pageHeight - currentTop < footerHeight + contentPadding + 1400) {
       iphone[0].className = "iphone iphone-bottom";
       iphone[0].setAttribute('style','')
-    } else if((iphone.initialTop - currentTop) <= iphone.dockingOffset + 40) {
+    } else if((iphone.initialTop - currentTop) <= iphone.dockingOffset + 41) {
       iphone[0].className = "iphone iphone-fixed";
       iphone.css({top: iphone.dockingOffset})
     } else {
@@ -98,10 +98,10 @@ $(function() {
 
     if(currentTop >= $('.docs-masthead').outerHeight()) {
       $('.platform-toggle').addClass('fixed');
-      console.log('fixed');
+      $('.docs-components').css('padding-top', $('.platform-toggle').outerHeight());
     } else {
       $('.platform-toggle').removeClass('fixed');
-      console.log('not fixed');
+      $('.docs-components').css('padding-top', 0);
     }
 
     // Injection of components into phone
@@ -131,4 +131,4 @@ $(function() {
 
   $(window).on('load resize', initialize);
   $(window).on('load', function () { new FingerBlast('.iphone-content'); });
-});
+});

lib/sass/docs.scss

@@ -156,7 +156,9 @@ h1, h2, h3, h4, h5, h6 {
 // --------------------------------------------------
 
 .platform-toggle {
+  z-index: 3;
   border-bottom: 1px solid #ddd;
+  background-color: #fff;
 
   &.fixed {
     position: fixed;
@@ -287,14 +289,10 @@ hr {
 // Tablet to desktop 
 // --------------------------------------------------
 @media screen and (min-width: 768px) {
-  .phone-column {
-    position: relative;
-  }
   .iphone {
-    display: block;
-    position: absolute;
+    position: relative;
     top: 50px;
-    float: right;
+    display: block;
     width: 395px;
     height: 813px;
     margin-left: -13px;
@@ -396,6 +394,10 @@ hr {
   padding-left: 15px;
   padding-right: 15px;
   float: left;
+
+  &.pull-right {
+    float: right;
+  }
 }
 // Lines nested grids up correctly.
 .column .column-group {