Fix content top on scroll

2 files changed, 12 insertions, 12 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 011e5cbd..4c1e72d1 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -22,7 +22,7 @@ import { me } from './api';
 
 const elClassHidden = 'header--hidden';
 
-const elClassFull = 'content--full';
+const elClassTop = 'content--top';
 
 export default function App() {
 
@@ -57,7 +57,7 @@ export default function App() {
 
   const [scrollState, setScrollState] = useRafState({
     hidden: false,
-    bottom: false,
+    top: false,
     prevScroll: 0
   });
 
@@ -69,30 +69,30 @@ export default function App() {
     setScrollState((scrollState) => {
       let wScrollDiff = scrollState.prevScroll - y;
       let hidden = scrollState.hidden;
-      let bottom = scrollState.bottom;
+      let top = scrollState.top;
       if (y <= 0) {
         // scrolled to the very top; element sticks to the top
         hidden = false;
-        bottom = false;
+        top = true;
       } else if ((wScrollDiff > 0) && hidden) {
         // scrolled up; element slides in
         hidden = false;
-        bottom = false;
+        top = false;
       } else if (wScrollDiff < 0) {
         // scrolled down
         if ((y + wHeight) >= dHeight && hidden) {
           // scrolled to the very bottom; element slides in
           hidden = false;
-          bottom = true;
+          top = false;
         } else {
           // scrolled down; element slides out
           hidden = true;
-          bottom = false;
+          top = false;
         }
       }
       return {
         hidden: hidden,
-        bottom: bottom,
+        top: top,
         prevScroll: y
       };
     });
@@ -161,7 +161,7 @@ export default function App() {
       <>
         <Header visitor={visitor} className={scrollState.hidden ? elClassHidden : ''} />
         <div id="wrapper">
-          <section id="content" ref={contentRef} className={scrollState.hidden || scrollState.bottom ? elClassFull : ''}>
+          <section id="content" ref={contentRef} className={scrollState.top ? elClassTop : ''}>
             <Switch>
               <Route exact path="/" render={(props) => <Discussions visitor={visitor} {...props} />} />
               <Route exact path="/home" render={(props) => <Home visitor={visitor} {...props} />} />
diff --git a/vnext/src/index.css b/vnext/src/index.css
index 3cc41b8b..6ca33a13 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -163,13 +163,13 @@ hr {
 
 #content {
     grid-area: content;
-    margin-top: 64px;
+    margin-top: 0;
     overflow: auto;
     transition: margin-top 0.4s;
 }
 
-.content--full {
-    margin-top: 0 !important;
+.content--top {
+    margin-top: 64px !important;
 }
 
 #footer {