Sticky main header

src/components/Nav/Header.scss

@@ -1,7 +1,9 @@
 header {
+  background: #fff;
   margin-bottom: 2.2rem;
-  position: sticky;
+  position: fixed;
   top: 0;
+  width: 100%;
   z-index: 10;
 
   .wide-container {
@@ -13,6 +15,17 @@ header {
   }
 }
 
+.header--scrolled-bottom,
+.header--scrolled-top {
+  .main-logo {
+    height: 56px;
+
+    img {
+      height: 20px;
+    }
+  }
+}
+
 .header__inner {
   background: #fff;
   border-bottom: 4px solid #000;
@@ -40,8 +53,9 @@ header {
   display: inline-flex;
   height: 70px;
   padding: 0 $container-padding-x 0 0;
-  text-align: center;
   position: relative;
+  transition: height 0.2s;
+  text-align: center;
   z-index: 9;
 
   @include media-breakpoint-up(lg) {
@@ -49,6 +63,10 @@ header {
   }
 
   img {
+    height: 32px;
+    object-fit: contain;
+    object-position: left;
+    transition: height 0.2s;
     vertical-align: middle;
     width: 100px;
 
@@ -84,12 +102,16 @@ nav {
 }
 
 .main-navigation {
-  display: inline-flex;
+  position: relative;
   @include font-size(1.7rem);
 
+  ul {
+    display: inline-flex;
     list-style: none;
     margin: 0;
+    opacity: 1;
     padding: 0;
+    transition: opacity 0.3s;
 
     @include media-breakpoint-down(md) {
       background: #fff;
@@ -113,13 +135,20 @@ nav {
       padding: divide($container-padding-x, 2);
     }
 
+    .header--scrolled-bottom & {
+      opacity: 0;
+    }
+  }
+
   &.fixed {
+    ul {
       display: inline-flex;
 
       @include media-breakpoint-down(lg) {
         display: block !important;
       }
     }
+  }
 
   li {
     margin-right: 2.4rem;
@@ -132,8 +161,8 @@ nav {
   .selected a {
     border-bottom: 2px solid;
     color: #000;
-    pointer-events: none;
     cursor: default;
+    pointer-events: none;
   }
 }
 
@@ -213,3 +242,24 @@ nav {
     }
   }
 }
+
+.article-header {
+  @include font-size(1.4rem);
+
+  left: 0;
+  margin: 0.2em;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  transition: opacity 0.3s, z-index 0s 0.3s;
+  white-space: nowrap;
+  width: 100%;
+  z-index: -1;
+
+  .header--scrolled-bottom & {
+    transition: opacity 0.3s;
+    opacity: 1;
+    z-index: 1;
+  }
+}

src/components/Nav/Header.tsx

@@ -10,6 +10,7 @@ import { useStore } from '@nanostores/solid'
 import { session as ssession } from '../../stores/auth'
 import { route, router } from '../../stores/router'
 import './Header.scss'
+import { Shout } from '../../graphql/types.gen'
 
 const resources = [
   { name: t('zine'), href: '/' },
@@ -18,9 +19,10 @@ const resources = [
   //{ name: t('community'), href: '/community' }
 ]
 
-export const Header = () => {
+export const Header = (props: Shout) => {
   // signals
   const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
+  const [getIsScrolled, setIsScrolled] = createSignal(false)
   const [fixed, setFixed] = createSignal(false)
   const [visibleWarnings, setVisibleWarnings] = createSignal(false)
   // stores
@@ -46,13 +48,12 @@ export const Header = () => {
   const enterClick = route(() => showModal('auth'))
   const bellClick = createMemo(() => (authorized() ? route(toggleWarnings) : enterClick))
 
-  const root = null
-
   onMount(() => {
     let scrollTop = window.scrollY
 
     const handleScroll = () => {
       setIsScrollingBottom(window.scrollY > scrollTop)
+      setIsScrolled(window.scrollY > 0)
       scrollTop = window.scrollY
     }
 
@@ -65,8 +66,8 @@ export const Header = () => {
   return (
     <header
       classList={{
-        ['header--scrolled-top']: !getIsScrollingBottom(),
+        ['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
-        ['header--scrolled-bottom']: getIsScrollingBottom()
+        ['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
       }}
     >
       <Modal name="auth">
@@ -79,7 +80,13 @@ export const Header = () => {
               <img src="/logo.svg" alt={t('Discours')} />
             </a>
           </div>
-          <ul class="col main-navigation text-xl inline-flex" classList={{ fixed: fixed() }}>
+          <div class="col main-navigation">
+            <div class="article-header">
+              Дискурс — независимый художественно-аналитический журнал с горизонтальной редакцией,
+              основанный на принципах свободы слова, прямой демократии и совместного редактирования.
+            </div>
+
+            <ul class="text-xl inline-flex" classList={{ fixed: fixed() }}>
               <For each={resources}>
                 {(r: { href: string; name: string }) => (
                   <li classList={{ selected: r.href === subpath() }}>
@@ -90,6 +97,7 @@ export const Header = () => {
                 )}
               </For>
             </ul>
+          </div>
           <div class="usernav">
             <div class="usercontrol col">
               <div class="usercontrol__item">

src/styles/app.scss

@@ -533,6 +533,7 @@ figcaption {
 
 .main-content {
   flex: 1 100%;
+  padding-top: 100px;
   transition: all 1s ease;
 }