aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/App.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/App.js')
-rw-r--r--vnext/src/App.js18
1 files changed, 9 insertions, 9 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} />} />