WIP: sticky main navigation block

src/components/Nav/Header.scss

@@ -1,7 +1,12 @@
 header {
   margin-bottom: 2.2rem;
+  position: sticky;
+  top: 0;
+  z-index: 10;
 
   .wide-container {
+    background: #fff;
+
     @include media-breakpoint-down(sm) {
       padding: 0 divide($container-padding-x, 2);
     }

src/components/Nav/Header.tsx

@@ -1,4 +1,4 @@
-import { For, Show, createSignal, createMemo, createEffect } from 'solid-js'
+import {For, Show, createSignal, createMemo, createEffect, onMount} from 'solid-js'
 import Private from './Private'
 import Notifications from './Notifications'
 import Icon from './Icon'
@@ -44,8 +44,26 @@ export const Header = () => {
   const authorized = createMemo(() => session()?.user?.slug)
   const enterClick = route(() => showModal('auth'))
   const bellClick = createMemo(() => (authorized() ? route(toggleWarnings) : enterClick))
+
+  const root = null;
+
+  onMount(() => {
+    let scrollTop = window.scrollY;
+
+    window.addEventListener('scroll', () => {
+      const scrolledTop = scrollTop < window.scrollY;
+
+      window.console.log(scrolledTop);
+
+      root.classList.toggle('header--scrolled-top', scrolledTop);
+      root.classList.toggle('header--scrolled-bottom', !scrolledTop);
+
+      scrollTop = window.scrollY;
+    });
+  });
+
   return (
-    <header>
+    <header ref={root}>
       <Modal name="auth">
         <AuthModal />
       </Modal>

src/components/Nav/Topics.scss

@@ -1,7 +1,11 @@
 .subnavigation {
   @include font-size(1.5rem);
 
-  margin-bottom: 2.4rem;
+  height: 3em;
+  line-height: 3em;
+  margin-bottom: 1.2rem !important;
+  overflow: hidden;
+  position: relative;
 
   @include media-breakpoint-down(sm) {
     padding: 0 divide($container-padding-x, 2);
@@ -10,6 +14,7 @@
   .topics {
     display: flex;
     flex-wrap: wrap;
+    justify-content: space-between;
     list-style: none;
     margin: 0;
     padding: 0;

src/styles/app.scss

@@ -33,7 +33,7 @@ body {
   font-family: Muller, Arial, Helvetica, sans-serif;
   font-size: 2rem;
   line-height: 1.4;
-  height: 100%;
+  min-height: 100%;
   text-size-adjust: 100%;
 
   &.fixed {