handle toggle only on load and scroll.

docs-assets/css/docs.css

@@ -899,24 +899,24 @@ body {
 .platform-toggle .segmented-controller {
   max-width: 300px;
   margin: 0 auto;
-  border-color: #fff;
+  border-color: #00d1fe;
   background-color: transparent;
 }
 .platform-toggle .segmented-controller li {
   cursor: pointer;
-  border-color: #fff;
+  border-color: #00d1fe;
 }
 .platform-toggle .segmented-controller li a {
-  color: #fff;
+  color: #00d1fe;
 }
 .platform-toggle .segmented-controller li:active {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(0, 209, 254, 0.3);
 }
 .platform-toggle .segmented-controller li.selected {
-  background-color: #fff;
+  background-color: #00d1fe;
 }
 .platform-toggle .segmented-controller li.selected a {
-  color: #254456;
+  color: #fff;
 }
 
 .component {

docs-assets/js/docs.js

@@ -22,7 +22,6 @@ $(function() {
     doc                       = $(document);
     bod                       = $(document.body)
     device                    = device || $('.device');
-    platformToggle            = $('.platform-toggle');
     navComponentLinks         = $('.docs-nav');
     componentsList            = $('.components-list');
     componentLinks            = $('.component-example a');
@@ -38,10 +37,6 @@ $(function() {
     device.initialTop         = device.initialTop || device.offset().top;
     device.dockingOffset      = ($(window).height() - device.height())/2;
 
-    // Toggle placment
-    toggleTop    = platformToggle.offset().top;
-    toggleHeight = platformToggle.outerHeight();
-
     checkDesktopContent();
     calculateScroll();
 
@@ -87,6 +82,7 @@ $(function() {
     });
 
     win.on('scroll', calculateScroll);
+    win.on('scroll', calculateToggle);
   }
 
   var checkDesktopContent = function () {
@@ -115,14 +111,6 @@ $(function() {
       device[0].setAttribute('style','')
     }
 
-    if(currentTop >= toggleTop) {
-      platformToggle.addClass('fixed');
-      $('.docs-components').css('padding-top', toggleHeight);
-    } else if (currentTop <= $('.docs-header').outerHeight()) {
-      platformToggle.removeClass('fixed');
-      $('.docs-components').css('padding-top', 0);
-    }
-
     // Injection of components into device
     for (var l = contentSection.length; l--;) {
       if ((topCache[l] - currentTop) < windowHeight) {
@@ -148,6 +136,31 @@ $(function() {
     }
   }
 
+  // Platform toggle
+  var initializeToggle = function () {
+    platformToggle = $('.platform-toggle');
+
+    // Toggle placment
+    toggleTop    = platformToggle.offset().top;
+    toggleHeight = platformToggle.outerHeight();
+
+    calculateToggle();
+  }
+  var calculateToggle = function () {
+    var currentTop = win.scrollTop();
+    
+    console.log('yep');
+
+    if(currentTop >= toggleTop) {
+      platformToggle.addClass('fixed');
+      $('.docs-components').css('padding-top', toggleHeight);
+    } else if (currentTop <= $('.docs-header').outerHeight()) {
+      platformToggle.removeClass('fixed');
+      $('.docs-components').css('padding-top', 0);
+    }
+  }
+
   $(window).on('load resize', initialize);
+  $(window).on('load', initializeToggle);
   $(window).on('load', function () { new FingerBlast('.device-content'); });
 });

lib/sass/docs.scss

@@ -312,24 +312,24 @@ body {
   .segmented-controller {
     max-width: 300px;
     margin: 0 auto;
-    border-color: #fff;
+    border-color: #00d1fe;
     background-color: transparent;
 
     li {
       cursor: pointer;
-      border-color: #fff;
+      border-color: #00d1fe;
 
       a { 
-        color: #fff;
+        color: #00d1fe;
       }
       &:active {
-        background-color: rgba(255,255,255,.3);
+        background-color: rgba(0,209,254,.3);
       }
       &.selected {
-        background-color: #fff;
+        background-color: #00d1fe;
 
         a {
-          color: #254456;
+          color: #fff;
         }
       }
     }