☰

Sticky ChatGPT Projects

Makes the projects stick when scrolling

目前为 2025-03-21 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Sticky ChatGPT Projects
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.4
  5. // @description  Makes the projects stick when scrolling
  6. // @author       Noah Peterson, ChatGPT o1
  7. // @match        https://chatgpt.com/*
  8. // @grant        none
  9. // @icon         https://cdn.oaistatic.com/assets/favicon-miwirzcw.ico
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     function makeSticky() {
  17.         // 1) The heading container
  18.         const headingContainer = document.querySelector('div.z-20.screen-arch\\:sticky');
  19.         if (headingContainer) {
  20.             headingContainer.style.position = 'sticky';
  21.             headingContainer.style.top = '0';
  22.             headingContainer.style.zIndex = '99999';
  23.  
  24.             // Remove extra padding/border so we don't see a gap
  25.             headingContainer.style.paddingBottom = '0';
  26.             headingContainer.style.borderBottom = 'none';
  27.             headingContainer.style.background = 'var(--sidebar-surface-primary)';
  28.         }
  29.  
  30.         // 2) The <aside> containing the projects
  31.         const aside = document.querySelector('aside.flex.flex-col.gap-4.mb-0');
  32.         if (aside) {
  33.             aside.style.position = 'sticky';
  34.             aside.style.zIndex = '99998';
  35.             aside.style.background = 'var(--sidebar-surface-primary)';
  36.  
  37.             // Remove border/padding if you like, or keep them if you want a visual divider
  38.             aside.style.paddingBottom = '12px';
  39.             aside.style.borderBottom = '2px solid #777';
  40.  
  41.             // Dynamically measure the heading’s actual height
  42.             const headingHeight = headingContainer ? headingContainer.offsetHeight : 0;
  43.  
  44.             // Pin the aside exactly below that heading height
  45.             aside.style.top = headingHeight + 'px';
  46.         }
  47.     }
  48.  
  49.     // Run once initially
  50.     makeSticky();
  51.  
  52.     // Observe for dynamic re-renders
  53.     const observer = new MutationObserver(() => {
  54.         makeSticky();
  55.     });
  56.     observer.observe(document.body, { childList: true, subtree: true });
  57. })();