3 files changed, 60 insertions, 41 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index dd22a026..c92c65ad 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -950,7 +950,7 @@ a .normal-content {
   font-weight: 800;
 }
 
-.nav-links-hierarchical .nav-link:not(:first-child)::before {
+.nav-links-hierarchical .nav-link + .blockwrap .nav-link::before {
   content: "\0020/\0020";
 }
 
@@ -2904,35 +2904,31 @@ h3.content-heading {
 }
 
 .content-sticky-heading-root {
-  position: sticky;
-  top: 0;
-  width: 100%;
+  width: calc(100% + 2 * var(--content-padding));
+  margin: calc(-1 * var(--content-padding));
+  margin-bottom: 0;
 }
 
-.content-sticky-heading-anchor {
-  position: relative;
+.content-sticky-heading-anchor,
+.content-sticky-heading-container {
   width: 100%;
 }
 
-.content-sticky-heading-container {
-  position: absolute;
-  width: 100%;
+.content-sticky-heading-root:not([inert]) {
+  position: sticky;
+  top: 0;
 }
 
-.imaginary-static-heading-root,
-.imaginary-static-heading-row,
-.imaginary-static-heading-title {
-  display: block;
+.content-sticky-heading-anchor:not(:matches(.content-sticky-heading-root[inert]) *) {
+  position: relative;
 }
 
-.content-sticky-heading-root,
-.imaginary-static-heading-root {
-  width: calc(100% + 2 * var(--content-padding));
-  margin: calc(-1 * var(--content-padding));
+.content-sticky-heading-container:not(:matches(.content-sticky-heading-root[inert]) *) {
+  position: absolute;
 }
 
-.imaginary-static-heading-root {
-  margin-bottom: calc(0.5 * var(--content-padding));
+.content-sticky-heading-root[inert] {
+  visibility: hidden;
 }
 
 main.long-content .content-sticky-heading-container {
@@ -2946,12 +2942,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   padding-right: calc(var(--long-content-padding-ratio) * (100% - 2 * var(--content-padding)) + var(--content-padding));
 }
 
-.imaginary-static-heading-root {
-  visibility: hidden;
-}
-
-.content-sticky-heading-row,
-.imaginary-static-heading-row {
+.content-sticky-heading-row {
   box-sizing: border-box;
   padding:
     calc(1.25 * var(--content-padding) + 5px)
@@ -2961,9 +2952,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
 
   width: 100%;
   margin: 0;
-}
 
-.content-sticky-heading-row {
   background: var(--bg-black-color);
   border-bottom: 1px dotted rgba(220, 220, 220, 0.4);
 
@@ -2983,8 +2972,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   grid-template-columns: 1fr min(40%, 90px);
 }
 
-.content-sticky-heading-root.has-cover +
-.imaginary-static-heading-root .imaginary-static-heading-title {
+.content-sticky-heading-root.has-cover {
   padding-right: min(40%, 400px);
 }
 
diff --git a/src/static/js/client/additional-names-box.js b/src/static/js/client/additional-names-box.js
index da1467ec..4ebb5dfc 100644
--- a/src/static/js/client/additional-names-box.js
+++ b/src/static/js/client/additional-names-box.js
@@ -30,8 +30,10 @@ export function getPageReferences() {
 
   info.stickyHeadingLink =
     document.querySelector(
-      '.content-sticky-heading-container ' +
-      'a[href="#additional-names-box"]');
+      '.content-sticky-heading-container' +
+      ' ' +
+      'a[href="#additional-names-box"]' +
+      ':not(:matches([inert] *))');
 
   info.contentContainer =
     document.querySelector('#content');
@@ -100,7 +102,30 @@ function handleAdditionalNamesBoxLinkClicked(domEvent) {
       ? info.box.getBoundingClientRect()
       : info.mainContentContainer.getBoundingClientRect());
 
-  if (top + 20 < margin || top > 0.4 * window.innerHeight) {
+  const {bottom, height} =
+    (state.visible
+      ? info.box.getBoundingClientRect()
+      : {bottom: null});
+
+  const boxFitsInFrame =
+    (height
+      ? height < window.innerHeight - margin - 60
+      : null);
+
+  const worthScrolling =
+    top + 20 < margin ||
+
+    (height && boxFitsInFrame
+      ? top > 0.7 * window.innerHeight
+   : height && !boxFitsInFrame
+      ? top > 0.4 * window.innerHeight
+      : top > 0.5 * window.innerHeight) ||
+
+    (bottom && boxFitsInFrame
+      ? bottom > window.innerHeight - 20
+      : false);
+
+  if (worthScrolling) {
     if (!state.visible) {
       toggleAdditionalNamesBox();
     }
diff --git a/src/static/js/client/sticky-heading.js b/src/static/js/client/sticky-heading.js
index 1020cab3..fba05b84 100644
--- a/src/static/js/client/sticky-heading.js
+++ b/src/static/js/client/sticky-heading.js
@@ -7,7 +7,10 @@ import {cssProp, dispatchInternalEvent, templateContent}
 export const info = {
   id: 'stickyHeadingInfo',
 
+  stickyRoots: null,
+
   stickyContainers: null,
+  staticContainers: null,
 
   stickyHeadingRows: null,
   stickyHeadings: null,
@@ -23,7 +26,6 @@ export const info = {
   contentCovers: null,
   contentCoversReveal: null,
 
-  imaginaryStaticHeadings: null,
   referenceCollapsedHeading: null,
 
   state: {
@@ -37,8 +39,16 @@ export const info = {
 };
 
 export function getPageReferences() {
+  info.stickyRoots =
+    Array.from(document.querySelectorAll('.content-sticky-heading-root:not([inert])'));
+
   info.stickyContainers =
-    Array.from(document.getElementsByClassName('content-sticky-heading-container'));
+    info.stickyRoots
+      .map(el => el.querySelector('.content-sticky-heading-container'));
+
+  info.staticContainers =
+    info.stickyRoots
+      .map(el => el.nextElementSibling);
 
   info.stickyCoverContainers =
     info.stickyContainers
@@ -84,10 +94,6 @@ export function getPageReferences() {
     info.contentContainers
       .map(el => Array.from(el.querySelectorAll('.content-heading')));
 
-  info.imaginaryStaticHeadings =
-    info.contentContainers
-      .map(el => el.querySelector('.imaginary-static-heading-root'));
-
   info.referenceCollapsedHeading =
     info.stickyHeadings
       .map(el => el.querySelector('.reference-collapsed-heading'));
@@ -182,16 +188,16 @@ function updateStuckStatus(index) {
 
 function updateCollapseStatus(index) {
   const stickyContainer = info.stickyContainers[index];
+  const staticContainer = info.staticContainers[index];
   const stickyHeading = info.stickyHeadings[index];
-  const imaginaryStaticHeading = info.imaginaryStaticHeadings[index];
   const referenceCollapsedHeading = info.referenceCollapsedHeading[index];
 
   const {height: uncollapsedHeight} = stickyHeading.getBoundingClientRect();
   const {height: collapsedHeight} = referenceCollapsedHeading.getBoundingClientRect();
 
   if (
-    imaginaryStaticHeading.getBoundingClientRect().bottom < 4 ||
-    imaginaryStaticHeading.getBoundingClientRect().top < -80
+    staticContainer.getBoundingClientRect().bottom < 4 ||
+    staticContainer.getBoundingClientRect().top < -80
   ) {
     if (!stickyContainer.classList.contains('collapse')) {
       stickyContainer.classList.add('collapse');