Sticky the Current Heading at top (or highlight it in the outline)

Feature requests
5

That pastebin link expired, so I’ll post the javascript code for the basic Header Display here:

// HEADER DISPLAY 1.0

let docTitle = document.getElementsByClassName("view-header-title")[0];

//create Header Display box
let hDisplay = document.createElement("span");
hDisplay.className = "hDisplay";

let look = window.innerHeight * 0.3;
// console.log(look);

let prevTitle = "";

// start the check if obsidian is in focus
window.addEventListener("focus", function (event) {
	console.log("has focus");

	const timeBoss = setInterval(titleCheck, 1000);

	// get last header in rendered DOM, get scroll position relative to viewport
	function titleCheck() {
		let hTarget = document.querySelectorAll(".cm-header-1");
		let len = hTarget.length;
		let lastTarget = len < 1 ? "" : hTarget[len - 1];

		const { top: t } = lastTarget.getBoundingClientRect();
		console.log(t);

		let hTitle = lastTarget.innerHTML;
		console.log(hTitle);

		// if it's a new header, and it's above 30% from top of viewport, update Header Display
		if (
			hTitle &&
			typeof hTitle !== "undefined" &&
			hTitle !== prevTitle &&
			t < look
		) {
			prevTitle = hTitle;
			console.log(prevTitle);
			hDisplay.innerHTML = "    -  " + hTitle + "  -    ";
			docTitle.appendChild(hDisplay);
		}
	}

	// stop the check if Obsidian is unfocused
	window.addEventListener("blur", function (event) {
		console.log("lost focus");
		clearInterval(timeBoss);
	});
});

I used the “JavaScript Init” plugin to add it to Obsidian.

1 Like