Doc: Make topic heading sticky.

This uses "position: sticky" so it doesn't work on IE 11 / HTML Help.



This *could* be IE-compatible if it instead used "position: fixed", but IE also doesn't support "scroll-padding" so there would be a problem with anchor targets being hidden underneath the header (needing hacks to fix).



Another approach is to make only .topicbody scrollable, not the whole page (like contents.htm). It works well on IE 11 (using flexbox, not grid) but seems to create an accessibility problem: if you focus the topic frame, pressing Up and Down does nothing until you tab to a link inside .topicbody, or tab to .topicbody itself (which requires tabindex="0" in IE 11).

ISHelp/Staging-dark/styles.css

@@ -7,6 +7,11 @@
 	Style sheet used by topic_*.htm
 */
 
+HTML {
+	/* Ensure that anchor targets don't get hidden underneath the sticky header.
+	   This is the height of .topicheading plus an extra 2rem of breathing room. */
+	scroll-padding-block-start: calc((20rem/16) * 1.5 + 8px + 2rem);
+}
 BODY {
 	font: calc(14rem/16)/1.5 "Segoe UI", sans-serif;
 	margin: 0;
@@ -87,6 +92,13 @@ LI.compact {
 	margin: 0;
 	font-size: calc(20rem/16);
 	font-weight: bold;
+	/* Can't allow wrapping because the scroll-padding setting expects a fixed height */
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	/* IE doesn't support sticky or scroll-padding */
+	position: sticky;
+	inset-block-start: 0;
 }
 .topicbody {
 	padding: 8px;

ISHelp/Staging/styles.css

@@ -16,6 +16,11 @@
   --light-tool-background-color: #e0e0e0;
   --dark-tool-background-color: #403E41;
 }
+HTML {
+	/* Ensure that anchor targets don't get hidden underneath the sticky header.
+	   This is the height of .topicheading plus an extra 2rem of breathing room. */
+	scroll-padding-block-start: calc((20rem/16) * 1.5 + 8px + 2rem);
+}
 BODY {
 	font: calc(14rem/16)/1.5 "Segoe UI", sans-serif;
 	margin: 0;
@@ -101,6 +106,13 @@ LI.compact {
 	margin: 0;
 	font-size: calc(20rem/16);
 	font-weight: bold;
+	/* Can't allow wrapping because the scroll-padding setting expects a fixed height */
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	/* IE doesn't support sticky or scroll-padding */
+	position: sticky;
+	inset-block-start: 0;
 }
 .topicbody {
 	padding: 8px;