3 files changed, 34 insertions, 24 deletions

diff --git a/coverage/htmlfiles/coverage_html.js b/coverage/htmlfiles/coverage_html.js
index 514103c7..182e518c 100644
--- a/coverage/htmlfiles/coverage_html.js
+++ b/coverage/htmlfiles/coverage_html.js
@@ -277,25 +277,7 @@ coverage.pyfile_ready = function ($) {
     coverage.assign_shortkeys();
     coverage.wire_up_help_panel();
     coverage.init_scroll_markers();
-
-    const sticky = document.querySelector('#sticky_header');
-    const header = document.querySelector('header');
-    const header_bottom = document.querySelector('header .content .stats').getBoundingClientRect().top;
-
-    function updateHeader() {
-        if (window.scrollY > header_bottom) {
-            sticky.classList.add('visible');
-            header.classList.add('hidden');
-        } else {
-            sticky.classList.remove('visible');
-            header.classList.remove('hidden');
-        }
-    }
-
-    updateHeader();
-    window.addEventListener('scroll', function() {
-        updateHeader();
-    });
+    coverage.wire_up_sticky_header();
 
     // Rebuild scroll markers when the window height changes.
     $(window).resize(coverage.build_scroll_markers);
@@ -627,3 +609,26 @@ coverage.build_scroll_markers = function () {
         previous_line = line_number;
     });
 };
+
+coverage.wire_up_sticky_header = function () {
+    const body = document.querySelector('body');
+    const header_bottom = (
+        document.querySelector('header .content .stats').getBoundingClientRect().top -
+        document.querySelector('header').getBoundingClientRect().top
+    );
+
+    function updateHeader() {
+        if (window.scrollY > header_bottom) {
+            body.classList.remove('bighead');
+            body.classList.add('littlehead');
+        } else {
+            body.classList.add('bighead');
+            body.classList.remove('littlehead');
+        }
+    }
+
+    updateHeader();
+    window.addEventListener('scroll', function() {
+        updateHeader();
+    });
+};
diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/style.css
index aa7341b5..245aa83d 100644
--- a/coverage/htmlfiles/style.css
+++ b/coverage/htmlfiles/style.css
@@ -36,7 +36,7 @@ header { background: #f8f8f8; width: 100%; border-bottom: 1px solid #ccc; }
 
 header .content { padding: 1rem 3.5rem; }
 
-header.hidden { visibility: hidden; }
+.littlehead header { visibility: hidden; }
 
 main { position: relative; z-index: 1; }
 
@@ -56,7 +56,7 @@ footer .content { padding: 0; color: #666; font-style: italic; }
 
 #sticky_header .content p { font-size: 1em; }
 
-#sticky_header.visible { display: block; }
+.littlehead #sticky_header { display: block; }
 
 h1 { font-size: 1.25em; display: inline-block; }
 
@@ -134,7 +134,7 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 
 #source { padding: 1em 0 1em 3.5rem; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
 
-#source p { position: relative; white-space: pre; }
+#source p { margin-top: -4em; padding-top: 4em; position: relative; white-space: pre; }
 
 #source p * { box-sizing: border-box; }
 
diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss
index 0c83d746..b6a7a155 100644
--- a/coverage/htmlfiles/style.scss
+++ b/coverage/htmlfiles/style.scss
@@ -168,7 +168,7 @@ header {
         padding: 1rem $left-gutter;
     }
 
-    &.hidden {
+    .littlehead & {
         visibility: hidden;
     }
 }
@@ -213,7 +213,7 @@ footer .content {
         }
     }
 
-    &.visible {
+    .littlehead & {
         display: block;
     }
 }
@@ -381,6 +381,11 @@ $border-indicator-width: .2em;
     font-family: $font-code;
 
     p {
+        // These two lines make anchors to the line scroll the line to be
+        // visible beneath the fixed-position header.
+        margin-top: -4em;
+        padding-top: 4em;
+
         // position relative makes position:absolute pop-ups appear in the right place.
         position: relative;
         white-space: pre;