Sticky Table Header - runhive.com

Make the table header sticky on scroll - 16/12/2024, 00:50:45

当前为 2024-12-16 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Sticky Table Header - runhive.com
  3. // @namespace Violentmonkey Scripts
  4. // @match https://runhive.com/tools/pace-chart/*
  5. // @grant none
  6. // @version 0.1
  7. // @description Make the table header sticky on scroll - 16/12/2024, 00:50:45
  8. // @author SnuB
  9. // @grant GM_addStyle
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14. 'use strict';
  15.  
  16. GM_addStyle(`td {font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;`);
  17.  
  18. function makeElementsSticky() {
  19. const thead = document.querySelector('thead');
  20. const table = document.querySelector('table');
  21. const navbar = document.querySelector('.navbar');
  22.  
  23. if (thead && table && navbar) {
  24. window.addEventListener('scroll', () => {
  25. const rows = table.querySelectorAll('tr');
  26. rows.forEach(row => {
  27. row.querySelectorAll('td, th').forEach(cell => {
  28. cell.innerHTML = cell.innerHTML.replace('Half<br>Marathon', 'Half');
  29. });
  30. });
  31.  
  32. const tableTop = table.offsetTop;
  33. const navbarTop = navbar.offsetTop;
  34.  
  35. thead.classList.toggle('sticky', window.pageYOffset >= tableTop);
  36. navbar.classList.toggle('sticky', window.pageYOffset >= navbarTop);
  37. });
  38.  
  39. GM_addStyle(`
  40. thead.sticky {
  41. position: sticky; top: 16px; color: #fff; z-index: 2; font-size: 12px; text-transform:uppercase;
  42. }
  43. .navbar { position: sticky; top: 0;
  44. }
  45. `);
  46. }
  47. }
  48.  
  49. window.addEventListener('load', makeElementsSticky);
  50. })();