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 diff --git a/plugins/tiddlywiki/menubar/startup.js b/plugins/tiddlywiki/menubar/startup.js new file mode 100644 index 00000000000..92936fc7e52 --- /dev/null +++ b/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); + } + }); + } +}; diff --git a/plugins/tiddlywiki/menubar/styles.tid b/plugins/tiddlywiki/menubar/styles.tid index 39ec6c62674..5156cc11e7a 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(--tv-menubar-height, 0px); +} + +<%endif%>