How do I: Fix PassageHeader over scroll?

Question

So I have a one-line story header in a passage called PassageHeader and it shows up on top of every passage fine, however, if there is more text in the window that requires scrolling, the user can just scroll right past the header.  I want the header to be always on top, while the rest of the passage(s) beneath it can be scrolled independently.  I know its doable with CSS, but I'm not sure how exactly...

If anyone can help me with this, it would be greatly appreciated! :)

Answer 1

By default SugarCube doesn't wrap the contents of it's PassageHeader special passage in a HTML element, this makes it hard to apply CSS styling to it. I suggest using an ID'ed div element like the following:

<div id="passage-header">This is the content of the passage header!</div>

You can now use CSS like the following in your Story Stylesheet area to move the passage-header div to the top of the page and fix in place like so:

#passage-header {
	position: fixed;
	top: 0;
	width: 100%;
	max-width: 54em;
	background-color: black;
}

...  the div's max-width is the same as the default for the passage area, and the background-color stops the Passage text showing through the PassageHeader text.