feat: fixed header in html

src/gantt.scss

@@ -10,26 +10,44 @@ $light-yellow: #f6e796 !default;
 $holiday-color: #f3f4f7 !default;
 $text-muted: #666 !default;
 $text-light: #fff !default;
-$text-dark: #333 !default;
+$text-dark: #111 !default;
 $progress-important: #2c94ec !default;
 $progress: #dedfe0 !default;
 $handle-color: #dcdce4 !default;
 $handle-color-important: #94c4f4 !default;
 $light-blue: #c4c4e9 !default;
 
+.gantt-container {
+  .grid-header {
+    background-color: #ffffff;
+    position: sticky;
+    top: 0;
+    left: 0;
+  }
+
+  .lower-text,
+  .upper-text {
+    font-size: 14px;
+    text-anchor: middle;
+    color: $text-muted;
+  }
+
+  .lower-text {
+    position: absolute;
+    width: fit-content;
+  }
+}
+
 .gantt {
   user-select: none;
   -webkit-user-select: none;
+  position: absolute;
 
   .grid-background {
     fill: none;
   }
 
-  .grid-header {
+
-    fill: #ffffff;
-    stroke: $border-color;
-    stroke-width: 1.4;
-  }
 
   .grid-row {
     fill: #ffffff;
@@ -171,7 +189,7 @@ $light-blue: #c4c4e9 !default;
 
     .bar {
       -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
-      filter: drop-shadow(0 0 5px rgba(17, 43, 66, .16));
+      filter: drop-shadow(0 0 2px rgba(17, 43, 66, .16));
       border-radius: 3px;
     }
 
@@ -189,17 +207,6 @@ $light-blue: #c4c4e9 !default;
 
   }
 
-  .lower-text,
-  .upper-text {
-    font-size: 14px;
-    text-anchor: middle;
-  }
-
-
-  .lower-text,
-  .upper-text {
-    fill: $text-dark;
-  }
 
   .hide {
     display: none;

src/index.js

@@ -350,7 +350,7 @@ export default class Gantt {
 
   setup_layers() {
     this.layers = {};
-    const layers = ["grid", "arrow", "progress", "bar", "details", "date"];
+    const layers = ["grid", "arrow", "progress", "bar", "details"];
     // make group layers
     for (let layer of layers) {
       this.layers[layer] = createSVG("g", {
@@ -381,7 +381,7 @@ export default class Gantt {
       width: grid_width,
       height: grid_height,
       class: "grid-background",
-      append_to: this.layers.date,
+      append_to: this.$svg,
     });
 
     $.attr(this.$svg, {
@@ -424,16 +424,13 @@ export default class Gantt {
   }
 
   make_grid_header() {
-    const header_width = this.dates.length * this.options.column_width;
+    let header = document.createElement("div");
-    const header_height = this.options.header_height + 10;
+
-    createSVG("rect", {
+    header.style.height = this.options.header_height + 10 + "px";
-      x: 0,
+    header.style.width = this.dates.length * this.options.column_width + "px";
-      y: 0,
+    header.classList.add('grid-header')
-      width: header_width,
+    this.$header = header
-      height: header_height,
+    this.$svg.parentElement.appendChild(header)
-      class: "grid-header",
-      append_to: this.layers.grid,
-    });
   }
 
   make_grid_ticks() {
@@ -578,25 +575,23 @@ export default class Gantt {
 
   make_dates() {
     for (let date of this.get_dates_to_draw()) {
-      createSVG("text", {
+      let $lower_text = document.createElement('div');
-        x: date.lower_x,
+      $lower_text.classList.add('lower-text')
-        y: date.lower_y,
+      $lower_text.style.left = date.lower_x + 'px'
-        innerHTML: date.lower_text,
+      $lower_text.style.top = date.lower_y + 'px'
-        class: "lower-text",
+      $lower_text.innerText = date.lower_text
-        append_to: this.layers.date,
+      this.$header.appendChild($lower_text)
-      });
 
       if (date.upper_text) {
-        const $upper_text = createSVG("text", {
+        let $upper_text = document.createElement('div');
-          x: date.upper_x,
+        $upper_text.classList.add('lower-text')
-          y: date.upper_y,
+        $upper_text.style.left = date.upper_x + 'px'
-          innerHTML: date.upper_text,
+        $upper_text.style.top = date.upper_y + 'px'
-          class: "upper-text",
+        $upper_text.innerText = date.upper_text
-          append_to: this.layers.date,
+        this.$header.appendChild($upper_text)
-        });
 
         // remove out-of-bound dates
-        if ($upper_text.getBBox().x2 > this.layers.grid.getBBox().width) {
+        if (date.upper_x > this.layers.grid.getBBox().width) {
           $upper_text.remove();
         }
       }
@@ -666,8 +661,8 @@ export default class Gantt {
       x: last_date_info
         ? last_date_info.base_pos_x + last_date_info.column_width
         : 0,
-      lower_y: this.options.header_height,
+      lower_y: this.options.header_height - 15,
-      upper_y: this.options.header_height - 25,
+      upper_y: this.options.header_height - 35,
     };
 
     const x_pos = {
@@ -846,7 +841,6 @@ export default class Gantt {
       const ids = [];
       let dx;
 
-      this.layers.date.setAttribute('transform', 'translate(0,' + e.currentTarget.scrollTop + ')');
       if (x_on_scroll_start) {
         dx = e.currentTarget.scrollLeft - x_on_scroll_start;
       }