Formatting

src/assets/javascripts/components/main/react/index.ts

@@ -88,8 +88,8 @@ export function watchMain(
       shareReplay(1)
     )
 
-  /* Compute the main area's top and bottom markers */
+  /* Compute the main area's top and bottom borders */
-  const marker$ = adjust$
+  const border$ = adjust$
     .pipe(
       switchMap(() => watchElementSize(el)
         .pipe(
@@ -104,7 +104,7 @@ export function watchMain(
     )
 
   /* Compute the main area's offset, visible height and if we scrolled past */
-  return combineLatest([adjust$, marker$, viewport$])
+  return combineLatest([adjust$, border$, viewport$])
     .pipe(
       map(([header, { top, bottom }, { offset: { y }, size: { height } }]) => {
         height = Math.max(0, height
@@ -114,7 +114,7 @@ export function watchMain(
         return {
           offset: top - header,
           height,
-          active: y >= top - header
+          active: top - header <= y
         }
       }),
       distinctUntilChanged<Main>((a, b) => {

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

@@ -96,7 +96,7 @@ interface MountOptions {
  * @return Operator function
  */
 export function mountTableOfContents(
-  { header$, main$, viewport$, tablet$}: MountOptions
+  { header$, main$, viewport$, tablet$ }: MountOptions
 ): OperatorFunction<HTMLElement, TableOfContents> {
   return pipe(
     switchMap(el => tablet$