diff --git a/css/style.css b/css/style.css
index 0756dfe..c0fa5cb 100644
--- a/css/style.css
+++ b/css/style.css
@@ -102,6 +102,12 @@
     overflow: hidden;
 }
 
+.fn-gantt .headerPanel {
+    position: fixed;
+    overflow: visible;
+    z-index: 15;
+}
+
 .fn-gantt .dataPanel {
     margin-left: 0px;
     border-right: 1px solid #DDD;
diff --git a/js/jquery.fn.gantt.js b/js/jquery.fn.gantt.js
index 564f419..8b274a1 100644
--- a/js/jquery.fn.gantt.js
+++ b/js/jquery.fn.gantt.js
@@ -449,7 +449,7 @@
                 var i, len;
                 var year, month, week, day;
                 var rday, dayClass;
-                var dataPanel;
+                var headerWidth, headerPanel;
 
                 // Setup the headings based on the chosen `settings.scale`
                 switch (settings.scale) {
@@ -562,10 +562,11 @@
                         'style="width: ' + tools.getCellSize() * hoursInDay + 'px;">' +
                         '<div class="fn-label">' + settings.dow[day.getDay()] + '</div></div>');
 
-                    dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
+                    headerPanel = $('<div class="headerPanel" style="width: '
+                            + range.length * tools.getCellSize() + 'px;"/>');
 
                     // Append panel elements
-                    dataPanel.append(
+                    headerPanel.append(
                         $row.clone().html(yearArr.join("")),
                         $row.clone().html(monthArr.join("")),
                         $row.clone().html(dayArr.join("")),
@@ -644,10 +645,11 @@
                         settings.months[month] +
                         '</div></div>');
 
-                    dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
+                    headerPanel = $('<div class="headerPanel" style="width: '
+                            + range.length * tools.getCellSize() + 'px;"/>');
 
                     // Append panel elements
-                    dataPanel.append(
+                    headerPanel.append(
                         $row.clone().html(yearArr.join("")),
                         $row.clone().html(monthArr.join("")),
                         $row.clone().html(dayArr.join(""))
@@ -697,10 +699,11 @@
                         settings.months[month] +
                         '</div></div>');
 
-                    dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
+                    headerPanel = $('<div class="headerPanel" style="width: '
+                            + range.length * tools.getCellSize() + 'px;"/>');
 
                     // Append panel elements
-                    dataPanel.append(
+                    headerPanel.append(
                         $row.clone().html(yearArr.join("")),
                         $row.clone().html(monthArr.join("")),
                         $row.clone().html(dayArr.join("")),
@@ -779,10 +782,11 @@
                         settings.months[month] +
                         '</div></div>');
 
-                    dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
+                    headerPanel = $('<div class="headerPanel" style="width: '
+                            + range.length * tools.getCellSize() + 'px;"/>');
 
                     // Append panel elements
-                    dataPanel.append(
+                    headerPanel.append(
                         $row.clone().html(yearArr.join("")),
                         $row.clone().html(monthArr.join("")),
                         $row.clone().html(dayArr.join("")),
@@ -790,6 +794,9 @@
                     );
                 }
 
+                var dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
+                dataPanel.append(headerPanel);
+
                 return $('<div class="rightPanel"></div>').append(dataPanel);
             },