Added floating header to dxcc table

application/views/awards/dxcc/index.php

@@ -5,11 +5,13 @@
 	<!-- Sub Nav for Awards -->
 	
     <?php $this->load->view("awards/nav_bar")?>
+    
+    <table id="table-fixed"></table>
 
 	<table width="100%" class="zebra-striped">
 	<thead>
         <tr>
-        <td>Country</td>
+        <td style="width:225px">Country</td>
         <td>160m</td>
         <td>80m</td>
         <td>40m</td>
@@ -43,4 +45,29 @@
     </tbody>
 
 	</table>
+	<style>
+        #table-fixed{
+            position: fixed;
+            top: 40px;
+            display: none;
+            background-color: white;
+        }
+	</style>
+	<script>
+	var tableOffset = $(".zebra-striped").offset().top-40;
+	$('#table-fixed').width($(".zebra-striped").width());
+	var $header = $(".zebra-striped > thead").clone();
+	var $fixedHeader = $("#table-fixed").append($header);
+
+	$(window).bind("scroll", function() {
+	    var offset = $(this).scrollTop();
+
+        if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
+	        $fixedHeader.show();
+	    }
+	    else if (offset < tableOffset) {
+	        $fixedHeader.hide();
+	    }
+	});
+	</script>
 </div>