aboutsummaryrefslogtreecommitdiff
path: root/vnext
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-10-30 10:47:12 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:55 +0300
commit3900358ca6eeac546cbe0eb0bd36572ddc404634 (patch)
tree7be54e089d4d487d4b14bfe8916f5b81e71e7cbc /vnext
parent625261489c14f0726092ee8d9ff730ef5dc0c861 (diff)
Fix content top on scroll
Diffstat (limited to 'vnext')
-rw-r--r--vnext/src/App.js18
-rw-r--r--vnext/src/index.css6
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 {