https://myfiteco.com/script/stickytable.js

1function adaptScrollbarWidth() {
2  const table = document.querySelector('#stycky.mainTable');
3  const extraScrollWidth = document.getElementById('extraScrollWidth');
4  if (table && extraScrollWidth) {
5    extraScrollWidth.style.width = table.offsetWidth + 'px';
6  }
7}
8
9function calculPositionHeader() {
10  const rect = document.getElementById('styckyHeader')?.getBoundingClientRect();
11  if (rect) {
12    const newStyckyHeader = document.getElementById('newStyckyHeader');
13    if (!newStyckyHeader.classList.contains('myaHeader')) {
14      newStyckyHeader.style.paddingRight = rect.left + 'px';
15      newStyckyHeader.style.paddingLeft = rect.left + 'px';
16    }
17    newStyckyHeader.style.width = document.getElementById('styckyHeader').childNodes[0]?.offsetWidth + 'px';
18
19    for (let i = 0; i < document.getElementById('styckyHeader').childNodes[0].childElementCount; i++) {
20      newStyckyHeader.childNodes[0].childNodes[i].style
21        .width = (document.getElementById('styckyHeader').childNodes[0].childNodes[i]?.offsetWidth) + 'px';
22    }
23  }
24}
25
26function calculPositionFooter() {
27  const rect = document.getElementById('styckyFooter')?.getBoundingClientRect();
28  if (rect) {
29    document.getElementById('newStyckyFooter').style.paddingRight = rect.left + 'px';
30    document.getElementById('newStyckyFooter').style.paddingLeft = rect.left + 'px';
31    document.getElementById('newStyckyFooter').style.width = document.getElementById('styckyFooter').childNodes[0]?.offsetWidth + 'px';
32
33    for (let i = 0; i < document.getElementById('styckyFooter').childNodes[0].childElementCount; i++) {
34      document.getElementById('newStyckyFooter').childNodes[0].childNodes[i].style
35        .width = (document.getElementById('styckyFooter').childNodes[0].childNodes[i]?.offsetWidth - 20) + 'px';
36    }
37  }
38}
39
40function createNewHeader() {
41  if (document.getElementById('styckyHeader')) {
42    const dupNode = document.getElementById('styckyHeader').cloneNode(true);
43    dupNode.id = 'newStyckyHeader';
44    document.getElementById('stycky').insertBefore(dupNode, document.getElementById('styckyHeader'));
45
46    const newStyckyHeader = document.getElementById('newStyckyHeader');
47    newStyckyHeader.style.opacity = 1;
48
49    if (newStyckyHeader.classList.contains('myaHeader')) {
50      const stickyScroll = document.getElementById('stickyScroll');
51      const rect = document.getElementById('targetScrollable').getBoundingClientRect();
52      if (rect && stickyScroll) {
53        newStyckyHeader.style.left = rect.left - stickyScroll.scrollLeft + 'px';
54      } else if (rect) {
55        newStyckyHeader.style.left = rect.left + 'px';
56      }
57    }
58  }
59}
60
61function removeNewHeader() {
62  if (document.getElementById('newStyckyHeader')) {
63    document.getElementById('newStyckyHeader').remove();
64  }
65}
66
67function handleMyaStickyHeader() {
68  const newStyckyHeader = document.getElementById('newStyckyHeader');
69  const buttons = newStyckyHeader.querySelectorAll('button');
70
71  for (let i = 0; i < buttons.length; i++) {
72    buttons[i].onclick = (e) => {
73      let buttonTarget;
74
75      if (e.target.nodeName === 'BUTTON') {
76        buttonTarget = e.target;
77      }
78      if (e.target.nodeName === 'SPAN') {
79        if (e.target.parentNode.nodeName === 'SPAN') {
80          buttonTarget = e.target.parentNode.parentNode;
81        } else {
82          buttonTarget = e.target.parentNode;
83        }
84      }
85
86      const dataSort = buttonTarget.dataset.sort;
87      if (dataSort) {
88        const btn = document.querySelector(`#styckyHeader.myaHeader button[data-sort="${dataSort}"]`);
89        btn.click();
90        window.scrollTo(0, 0);
91      }
92    };
93  }
94}
95
96function main() {
97  if (document.getElementById('stycky')) {
98    const rect = document.getElementById('stycky')?.getBoundingClientRect();
99    if (rect) {
100      // header
101      if (document.getElementById('styckyHeader')) {
102        if (rect.top < 0) {
103          if (!document.getElementById('newStyckyHeader')) {
104            createNewHeader();
105          }
106          document.getElementById('styckyHeader').style.opacity = 0;
107
108          calculPositionHeader();
109        } else {
110          removeNewHeader();
111          document.getElementById('styckyHeader').style.opacity = 1;
112        }
113      }
114
115      // footer
116      if (document.getElementById('styckyFooter')) {
117        if ((rect.bottom - window.innerHeight) > 0) {
118          if (document.getElementById('newStyckyFooter')) {
119            document.getElementById('newStyckyFooter').remove();
120          }
121          if (!document.getElementById('newStyckyFooter')) {
122            const dupNode = document.getElementById('styckyFooter').cloneNode(true);
123            dupNode.id = 'newStyckyFooter';
124            document.getElementById('stycky').insertBefore(dupNode, document.getElementById('styckyFooter'));
125            document.getElementById('newStyckyFooter').style.opacity = 1;
126          }
127          document.getElementById('styckyFooter').style.opacity = 0;
128          calculPositionFooter();
129        } else {
130          if (document.getElementById('newStyckyFooter')) {
131            document.getElementById('newStyckyFooter').remove();
132          }
133          document.getElementById('styckyFooter').style.opacity = 1;
134        }
135      }
136    }
137    // Btn new Header
138    const newStyckyHeader = document.getElementById('newStyckyHeader');
139    if (newStyckyHeader) {
140      if (newStyckyHeader.classList.contains('myaHeader')) {
141        handleMyaStickyHeader();
142      } else {
143        newStyckyHeader.onclick = (e) => {
144          let classSelect = null;
145          if (e.target.nodeName === 'BUTTON') {
146            classSelect = e.target.getAttribute('class');
147          }
148          if (e.target.parentNode.nodeName === 'BUTTON') {
149            classSelect = e.target.parentNode.getAttribute('class');
150          }
151          if (e.target.parentNode.parentNode.nodeName === 'BUTTON') {
152            classSelect = e.target.parentNode.parentNode.getAttribute('class');
153          }
154          if (e.target.parentNode.parentNode.parentNode.nodeName === 'BUTTON') {
155            classSelect = e.target.parentNode.parentNode.parentNode.getAttribute('class');
156          }
157          if (e.target.nodeName === 'INPUT') {
158            classSelect = e.target.getAttribute('class');
159          }
160
161          let classSelects = '';
162          if (classSelect) {
163            classSelect.split(' ').forEach((item) => {
164              classSelects += '.' + item;
165            });
166          }
167
168          if (classSelects) {
169            document.querySelector('#styckyHeader ' + classSelects).click();
170          }
171          removeNewHeader();
172          createNewHeader();
173          calculPositionHeader();
174        };
175      }
176    }
177  }
178}
179
180setTimeout(() => { main(); }, 1000);
181window.onclick = () => { setTimeout(() => { main(); }, 1000); };
182
183window.onscroll = () => { main(); };
184window.onresize = () => {
185  main();
186  adaptScrollbarWidth();
187};
188window.document.onkeyup = () => { main(); };