Fixed back-to-top button position for sticky navigation tabs

material/base.html

@@ -213,7 +213,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.ff0eccb3.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.e0abf5b0.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

src/assets/javascripts/components/toc/index.ts

@@ -276,8 +276,8 @@ export function mountTableOfContents(
       viewport$
         .pipe(
           takeUntil(push$.pipe(takeLast(1))),
-          debounceTime(250),
           distinctUntilKeyChanged("offset"),
+          debounceTime(250),
           withLatestFrom(push$)
         )
           .subscribe(([, { prev }]) => {

src/assets/javascripts/components/top/index.ts

@@ -27,10 +27,12 @@ import {
   combineLatest,
   distinctUntilChanged,
   distinctUntilKeyChanged,
+  endWith,
   finalize,
   map,
-  tap,
-  withLatestFrom
+  takeLast,
+  takeUntil,
+  tap
 } from "rxjs"
 
 import { Viewport } from "~/browser"
@@ -129,25 +131,15 @@ export function mountBackToTop(
   el: HTMLElement, { viewport$, header$, main$ }: MountOptions
 ): Observable<Component<BackToTop>> {
   const push$ = new Subject<BackToTop>()
-  push$
-    .pipe(
-      withLatestFrom(header$
-        .pipe(
-          distinctUntilKeyChanged("height")
-        )
-      )
-    )
-      .subscribe({
+  push$.subscribe({
 
     /* Handle emission */
-        next([{ hidden }, { height }]) {
-          el.style.top = `${height + 16}px`
+    next({ hidden }) {
       if (hidden) {
         el.setAttribute("data-md-state", "hidden")
         el.setAttribute("tabindex", "-1")
         el.blur()
       } else {
-            el.style.top = ""
         el.removeAttribute("data-md-state")
         el.removeAttribute("tabindex")
       }
@@ -161,6 +153,16 @@ export function mountBackToTop(
     }
   })
 
+  /* Watch header height */
+  header$
+    .pipe(
+      takeUntil(push$.pipe(endWith(0), takeLast(1))),
+      distinctUntilKeyChanged("height")
+    )
+      .subscribe(({ height }) => {
+        el.style.top = `${height + 16}px`
+      })
+
   /* Create and return component */
   return watchBackToTop(el, { viewport$, header$, main$ })
     .pipe(