Titles sticky to menubar instead of document top

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

plugins/tiddlywiki/menubar/startup.js

@@ -0,0 +1,71 @@
+/*\
+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;
+
+exports.startup = function() {
+	var menubarObserver = null;
+	var isTracking = false;
+
+	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 {
+			document.documentElement.style.setProperty("--tv-menubar-height", "0px");
+		}
+	}
+
+	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);
+		});
+	}
+
+	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);
+			}
+		});
+	}
+};

plugins/tiddlywiki/menubar/styles.tid

@@ -40,7 +40,7 @@ tags: [[$:/tags/Stylesheet]]
 </$reveal>
 \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(--tv-menubar-height, 0px);
+}
+
+<%endif%>