Fixes sticky columns in docs once and for all

server/files/javascript/semantic.js

@@ -31,7 +31,6 @@ semantic.ready = function() {
     $peekItem         = $peek.children('.menu').children('a.item'),
     $peekSubItem      = $peek.find('.item .menu .item'),
     $sortableTables   = $('.sortable.table'),
-    $stuckColumn      = $('.fixed.column .image, .fixed.column .content'),
 
     $ui               = $('.ui').not('.hover, .down'),
     $swap             = $('.theme.menu .item'),
@@ -380,6 +379,25 @@ semantic.ready = function() {
       }
     },
 
+    makeStickyColumns: function() {
+      var
+        $visibleStuck = $(this).find('.fixed.column .image, .fixed.column .content'),
+        isInitialized = ($visibleStuck.parent('.sticky-wrapper').size() !== 0)
+      ;
+      console.log(this);
+      if(!isInitialized) {
+        $visibleStuck
+          .waypoint('sticky', {
+            offset     : 65,
+            stuckClass : 'fixed'
+          })
+        ;
+      }
+      // apparently this doesnt refresh on first hit
+      $.waypoints('refresh');
+      $.waypoints('refresh');
+    },
+
     initializeCode: function() {
       var
         $code        = $(this).show(),
@@ -649,7 +667,7 @@ semantic.ready = function() {
       .tab({
         onTabInit : handler.makeCode,
         onTabLoad : function() {
-          $.waypoints('refresh');
+          $.proxy(handler.makeStickyColumns, this)();
           $peekItem.removeClass('active').first().addClass('active');
         }
       })
@@ -760,18 +778,6 @@ semantic.ready = function() {
       offset: 'bottom-in-view'
      })
   ;
-
-  $stuckColumn
-    .each(function() {
-      $(this)
-        .waypoint('sticky', {
-          offset     : 65,
-          stuckClass : 'fixed'
-        })
-      ;
-    })
-  ;
-
   $peek
     .waypoint('sticky', {
       offset     : 85,

server/files/stylesheets/semantic.css

@@ -1053,7 +1053,7 @@ body.guide .main.container > * {
   margin: 1em 0em;
   padding: 1em 0em;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
-  clear: both;
+/*  clear: both;*/
   position: relative;
 }
 #example .example .grid i.code {