From 5f9b295232407f51dd14235ba782c77ea837242d Mon Sep 17 00:00:00 2001 From: Simon Huber Date: Fri, 16 Jan 2026 07:00:12 +0100 Subject: [PATCH 1/8] Update styles.tid to use --tc-menubar-height variable --- plugins/tiddlywiki/menubar/styles.tid | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/plugins/tiddlywiki/menubar/styles.tid b/plugins/tiddlywiki/menubar/styles.tid index 39ec6c62674..c5b1b57556b 100644 --- a/plugins/tiddlywiki/menubar/styles.tid +++ b/plugins/tiddlywiki/menubar/styles.tid @@ -40,7 +40,7 @@ tags: [[$:/tags/Stylesheet]] \end -\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline +\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline conditional nav.tc-menubar { position: fixed; @@ -212,3 +212,12 @@ nav.tc-menubar .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button { } } + +/* Adjust sticky tiddler titles to account for fixed menubar */ +<%if [{$:/themes/tiddlywiki/vanilla/options/stickytitles}match[yes]] %> + +.tc-tiddler-title { + top: var(--tc-menubar-height, 0px); +} + +<%endif%> From fd010d45772c31bbc90525943a910f929c0a2bb3 Mon Sep 17 00:00:00 2001 From: Simon Huber Date: Fri, 16 Jan 2026 07:03:39 +0100 Subject: [PATCH 2/8] Create startup.js - menubar-height-tracker --- plugins/tiddlywiki/menubar/startup.js | 57 +++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 plugins/tiddlywiki/menubar/startup.js diff --git a/plugins/tiddlywiki/menubar/startup.js b/plugins/tiddlywiki/menubar/startup.js new file mode 100644 index 00000000000..5b5fe7d2641 --- /dev/null +++ b/plugins/tiddlywiki/menubar/startup.js @@ -0,0 +1,57 @@ +/*\ +title: $:/plugins/tiddlywiki/menubar/startup.js +type: application/javascript +module-type: startup + +Startup module to track menubar height and set CSS variable for sticky positioning + +\*/ + +"use strict"; + +exports.name = "menubar-height-tracker"; +exports.platforms = ["browser"]; +exports.after = ["startup"]; +exports.synchronous = true; + +var menubarObserver = null; + +exports.startup = function () { + var menubar = document.querySelector(".tc-menubar.tc-adjust-top-of-scroll"); + if(!menubar) { + // No menubar found, set to 0 + document.documentElement.style.setProperty("--tc-menubar-height","0px"); + return; + } + + // Function to update the CSS variable + function updateMenubarHeight() { + // Only account for menubar if it's fixed, sticky, or absolute (overlapping content) + var computedStyle = window.getComputedStyle(menubar); + var position = computedStyle.position; + var isOverlapping = position === "fixed" || position === "sticky" || position === "absolute"; + + if (isOverlapping) { + var height = menubar.getBoundingClientRect().height; + document.documentElement.style.setProperty("--tc-menubar-height", height + "px"); + } else { + // Menubar is in normal flow, no offset needed + document.documentElement.style.setProperty("--tc-menubar-height","0px"); + } + } + + // Initial update + updateMenubarHeight(); + + // Set up ResizeObserver to track menubar size changes + if(typeof ResizeObserver !== "undefined" && !menubarObserver) { + menubarObserver = new ResizeObserver(function () { + updateMenubarHeight(); + }); + menubarObserver.observe(menubar); + } + + // Also update on window resize as fallback + window.addEventListener("resize",updateMenubarHeight); +}; + From 68313a7c68543a69999a1dd158e930e472aa2c5f Mon Sep 17 00:00:00 2001 From: Simon Huber Date: Fri, 16 Jan 2026 07:07:54 +0100 Subject: [PATCH 3/8] Update startup.js --- plugins/tiddlywiki/menubar/startup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/tiddlywiki/menubar/startup.js b/plugins/tiddlywiki/menubar/startup.js index 5b5fe7d2641..9596aa78580 100644 --- a/plugins/tiddlywiki/menubar/startup.js +++ b/plugins/tiddlywiki/menubar/startup.js @@ -31,7 +31,7 @@ exports.startup = function () { var position = computedStyle.position; var isOverlapping = position === "fixed" || position === "sticky" || position === "absolute"; - if (isOverlapping) { + if(isOverlapping) { var height = menubar.getBoundingClientRect().height; document.documentElement.style.setProperty("--tc-menubar-height", height + "px"); } else { From 879aeb53c8b4c4f20035ba123eab094e3e0a3678 Mon Sep 17 00:00:00 2001 From: Simon Huber Date: Fri, 16 Jan 2026 07:22:57 +0100 Subject: [PATCH 4/8] Create #9584 - stick stickytitles to menubar.tid --- .../5.4.0/#9584 - stick stickytitles to menubar.tid | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 editions/tw5.com/tiddlers/releasenotes/5.4.0/#9584 - stick stickytitles to menubar.tid diff --git a/editions/tw5.com/tiddlers/releasenotes/5.4.0/#9584 - stick stickytitles to menubar.tid b/editions/tw5.com/tiddlers/releasenotes/5.4.0/#9584 - stick stickytitles to menubar.tid new file mode 100644 index 00000000000..df9731acdb0 --- /dev/null +++ b/editions/tw5.com/tiddlers/releasenotes/5.4.0/#9584 - stick stickytitles to menubar.tid @@ -0,0 +1,13 @@ +title: $:/changenotes/5.4.0/#9584 +created: 20260116062202184 +modified: 20260116062202184 +tags: $:/tags/ChangeNote +change-type: enhancement +change-category: usability +description: The sticky tiddler titles account for the menubar +release: 5.4.0 +github-links: https://github.com/TiddlyWiki/TiddlyWiki5/pull/9584 +github-contributors: BurningTreeC +type: text/vnd.tiddlywiki + +This change makes the sticky tiddler titles stick to the menubar if present instead of sticking to the top of the document and being hidden by the menubar From 346df5b58159365c39bb43ba29e8a1cddc44a57a Mon Sep 17 00:00:00 2001 From: Simon Huber Date: Fri, 16 Jan 2026 07:27:38 +0100 Subject: [PATCH 5/8] Update startup.js - change variable name to --tv-* --- plugins/tiddlywiki/menubar/startup.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/tiddlywiki/menubar/startup.js b/plugins/tiddlywiki/menubar/startup.js index 9596aa78580..e0c1de0a37b 100644 --- a/plugins/tiddlywiki/menubar/startup.js +++ b/plugins/tiddlywiki/menubar/startup.js @@ -20,7 +20,7 @@ exports.startup = function () { var menubar = document.querySelector(".tc-menubar.tc-adjust-top-of-scroll"); if(!menubar) { // No menubar found, set to 0 - document.documentElement.style.setProperty("--tc-menubar-height","0px"); + document.documentElement.style.setProperty("--tv-menubar-height","0px"); return; } @@ -33,10 +33,10 @@ exports.startup = function () { if(isOverlapping) { var height = menubar.getBoundingClientRect().height; - document.documentElement.style.setProperty("--tc-menubar-height", height + "px"); + document.documentElement.style.setProperty("--tv-menubar-height", height + "px"); } else { // Menubar is in normal flow, no offset needed - document.documentElement.style.setProperty("--tc-menubar-height","0px"); + document.documentElement.style.setProperty("--tv-menubar-height","0px"); } } From c46be54cf8c1fabbe15331be3922f7a8849cc9ea Mon Sep 17 00:00:00 2001 From: Simon Huber Date: Fri, 16 Jan 2026 07:28:02 +0100 Subject: [PATCH 6/8] Update styles.tid --- plugins/tiddlywiki/menubar/styles.tid | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/tiddlywiki/menubar/styles.tid b/plugins/tiddlywiki/menubar/styles.tid index c5b1b57556b..5156cc11e7a 100644 --- a/plugins/tiddlywiki/menubar/styles.tid +++ b/plugins/tiddlywiki/menubar/styles.tid @@ -217,7 +217,7 @@ nav.tc-menubar .tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button { <%if [{$:/themes/tiddlywiki/vanilla/options/stickytitles}match[yes]] %> .tc-tiddler-title { - top: var(--tc-menubar-height, 0px); + top: var(--tv-menubar-height, 0px); } <%endif%> From 101aac84606f930c679a87818e0f60bb140fd8c8 Mon Sep 17 00:00:00 2001 From: Simon Huber Date: Fri, 16 Jan 2026 11:30:58 +0100 Subject: [PATCH 7/8] Update startup.js --- plugins/tiddlywiki/menubar/startup.js | 64 +++++++++++++++++---------- 1 file changed, 40 insertions(+), 24 deletions(-) diff --git a/plugins/tiddlywiki/menubar/startup.js b/plugins/tiddlywiki/menubar/startup.js index e0c1de0a37b..7b15a483d9b 100644 --- a/plugins/tiddlywiki/menubar/startup.js +++ b/plugins/tiddlywiki/menubar/startup.js @@ -16,42 +16,58 @@ exports.synchronous = true; var menubarObserver = null; -exports.startup = function () { - var menubar = document.querySelector(".tc-menubar.tc-adjust-top-of-scroll"); - if(!menubar) { - // No menubar found, set to 0 - document.documentElement.style.setProperty("--tv-menubar-height","0px"); - return; - } +exports.startup = function() { + var menubarObserver = null; + var isTracking = false; - // Function to update the CSS variable - function updateMenubarHeight() { - // Only account for menubar if it's fixed, sticky, or absolute (overlapping content) + function updateMenubarHeight(menubar) { var computedStyle = window.getComputedStyle(menubar); var position = computedStyle.position; var isOverlapping = position === "fixed" || position === "sticky" || position === "absolute"; - if(isOverlapping) { var height = menubar.getBoundingClientRect().height; document.documentElement.style.setProperty("--tv-menubar-height", height + "px"); } else { - // Menubar is in normal flow, no offset needed - document.documentElement.style.setProperty("--tv-menubar-height","0px"); + document.documentElement.style.setProperty("--tv-menubar-height", "0px"); } } - // Initial update - updateMenubarHeight(); - - // Set up ResizeObserver to track menubar size changes - if(typeof ResizeObserver !== "undefined" && !menubarObserver) { - menubarObserver = new ResizeObserver(function () { - updateMenubarHeight(); + function setupMenubarTracking(menubar) { + if(isTracking) return; + isTracking = true; + + updateMenubarHeight(menubar); + + if(typeof ResizeObserver !== "undefined") { + menubarObserver = new ResizeObserver(function() { + updateMenubarHeight(menubar); + }); + menubarObserver.observe(menubar); + } + + window.addEventListener("resize", function() { + updateMenubarHeight(menubar); }); - menubarObserver.observe(menubar); } - // Also update on window resize as fallback - window.addEventListener("resize",updateMenubarHeight); -}; + function checkForMenubar() { + var menubar = document.querySelector(".tc-menubar.tc-adjust-top-of-scroll"); + if(menubar) { + setupMenubarTracking(menubar); + } else { + document.documentElement.style.setProperty("--tv-menubar-height", "0px"); + } + } + + // Initial check + checkForMenubar(); + // Re-check after wiki changes (DOM updates after refresh cycle) + if(!isTracking) { + $tw.wiki.addEventListener("change", function() { + if(!isTracking) { + $tw.utils.nextTick(checkForMenubar); + } + }); + } +}; From 242e02bb1899d9b3a06da1f6a533e9208f4a5e76 Mon Sep 17 00:00:00 2001 From: Simon Huber Date: Sat, 17 Jan 2026 05:44:52 +0100 Subject: [PATCH 8/8] Change menubarObserver to local variable in startup Refactor menubarObserver variable declaration to be local within the startup function. --- plugins/tiddlywiki/menubar/startup.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/plugins/tiddlywiki/menubar/startup.js b/plugins/tiddlywiki/menubar/startup.js index 7b15a483d9b..92936fc7e52 100644 --- a/plugins/tiddlywiki/menubar/startup.js +++ b/plugins/tiddlywiki/menubar/startup.js @@ -14,8 +14,6 @@ exports.platforms = ["browser"]; exports.after = ["startup"]; exports.synchronous = true; -var menubarObserver = null; - exports.startup = function() { var menubarObserver = null; var isTracking = false;