[TASK] apply sticky to first two summary headlines

src/main.rs

@@ -57,7 +57,7 @@ fn print_header(header: Heading, level: usize) -> String {
 
     ret.push_str(&format!(
         "<details>\
-            <summary><h{0}>{1}</h{0}></summary>\n\
+            <summary class='sticky'><h{0}>{1}</h{0}></summary>\n\
             <div>",
         level + 2,
         header_title

templates/app.js

@@ -1,6 +1,7 @@
 document.addEventListener('DOMContentLoaded', function() {
   changeTheme();
   initcolorTheme();
+  apply_stickies()
 });
 
 function changeTheme() {
@@ -69,3 +70,24 @@ function setTheme(theme, setLocalStorage = true) {
       document.documentElement.dataset.theme = 'dark';
   }
 }
+
+window.addEventListener('scroll', function() {
+    apply_stickies()
+})
+
+function apply_stickies() {
+    var _$stickies = [].slice.call(document.querySelectorAll('.sticky'))
+    _$stickies.forEach(function(_$sticky) {
+        if (CSS.supports && CSS.supports('position', 'sticky')) {
+            apply_sticky_class(_$sticky)
+        }
+    })
+}
+
+function apply_sticky_class(_$sticky) {
+    var currentOffset = _$sticky.getBoundingClientRect().top
+    var stickyOffset = parseInt(getComputedStyle(_$sticky).top.replace('px', ''))
+    var isStuck = currentOffset <= stickyOffset
+
+    _$sticky.classList.toggle('js-is-sticky', isStuck)
+}

templates/style.css

@@ -50,32 +50,56 @@ main {
 
 details summary {
   line-height: unset;
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+details summary::after {
+  flex-shrink: 0;
 }
 
 details > summary {
 	position: sticky;
-	top: 0px;
-	z-index: 99;
 	background-color: var(--pico-background-color);
-}
+  top: 0;
-details details > summary {
+  background: yellow;
-	top: 1.3rem; /* Height of h2*/
-	z-index: 98;
-}
-details details details > summary {
-	top: calc(1.3rem + 1.2rem);
-	z-index: 97;
-}
-details details details details > summary {
-	top: calc(1.3rem + 1.2rem + 1.1rem);
-	z-index: 96;
-}
-details details details details details > summary {
-	/* make sure to properly style enough levels of sticky headers :^) */
-	height: 1000px;
-	background-color:red;
 }
 
+details details > summary {
+  background: red;
+}
+
+details details details > summary {
+  position: unset !important;
+  background: blue;
+}
+
+details details details details > summary {
+  background: pink;
+}
+
+details details details details details > summary {
+	background-color:green;
+}
+
+summary h2,
+summary h3,
+summary h4,
+summary h5 { 
+  flex-grow: 1;
+}
+
+summary.js-is-sticky h2,
+summary.js-is-sticky h3,
+summary.js-is-sticky h4,
+summary.js-is-sticky h5 { 
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 0;
+}
 
 .par {
   margin-bottom: calc(var(--pico-spacing) * 2);
@@ -118,10 +142,6 @@ h4 {
   --pico-font-weight: 200;
 }
 
-details summary {
-  line-height: unset;
-}
-
 .par > ul {
   margin: var(--pico-spacing) 0;
   padding: 0;