Update waypoint position

thematters · Apr 2, 2019 · 095c1cb · 095c1cb
1 parent d993f2d
commit 095c1cb
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 57 deletions.
diff --git a/components/GlobalHeader/styles.css b/components/GlobalHeader/styles.css
@@ -1,5 +1,6 @@
 header {
   @mixin border-bottom-grey;
+  @mixin all-transition;
 
   position: fixed;
   top: 0;

diff --git a/pages/Misc/About/Slogan.tsx b/pages/Misc/About/Slogan.tsx
@@ -1,4 +1,8 @@
+import { useContext } from 'react'
+import { Waypoint } from 'react-waypoint'
+
 import { Button } from '~/components/Button'
+import { HeaderContext } from '~/components/GlobalHeader/Context'
 import { Translate } from '~/components/Language'
 
 import { PATHS } from '~/common/enums'
@@ -9,55 +13,74 @@ import IMAGE_SLOGAN_XL from '~/static/images/about-1-xl.svg'
 
 import styles from './styles.css'
 
-const Slogan = () => (
-  <section className="slogan">
-    <div style={{ width: '100%' }}>
-      <div className="l-row">
-        <div className="l-col-4 l-col-md-8 l-col-lg-12 ">
-          <h2>
-            <Translate
-              zh_hant="一個自由、自主、永續的"
-              zh_hans="一个自由、自主、永续的"
-            />
-            <br />
-            <Translate
-              zh_hant="創作與公共討論空間"
-              zh_hans="创作与公共讨论空间"
+const Slogan = () => {
+  const { updateHeaderState } = useContext(HeaderContext)
+
+  return (
+    <section className="slogan">
+      <div style={{ width: '100%' }}>
+        <div className="l-row">
+          <div className="l-col-4 l-col-md-8 l-col-lg-12 ">
+            <Waypoint
+              topOffset={64}
+              onEnter={() => {
+                updateHeaderState({ type: 'about', bgColor: 'transparent' })
+              }}
+              onLeave={() => {
+                updateHeaderState({ type: 'about', bgColor: 'default' })
+              }}
+              onPositionChange={({ currentPosition }) => {
+                if (currentPosition === 'above') {
+                  updateHeaderState({ type: 'about', bgColor: 'default' })
+                }
+              }}
             />
-          </h2>
-
-          <div className="buttons">
-            <Button
-              size="large"
-              bgColor="green"
-              is="link"
-              as={PATHS.HOME.as}
-              href={PATHS.HOME.href}
-            >
-              <Translate zh_hant="開始創作" zh_hans="开始创作" />
-            </Button>
+
+            <h2>
+              <Translate
+                zh_hant="一個自由、自主、永續的"
+                zh_hans="一个自由、自主、永续的"
+              />
+              <br />
+              <Translate
+                zh_hant="創作與公共討論空間"
+                zh_hans="创作与公共讨论空间"
+              />
+            </h2>
+
+            <div className="buttons">
+              <Button
+                size="large"
+                bgColor="green"
+                is="link"
+                as={PATHS.HOME.as}
+                href={PATHS.HOME.href}
+              >
+                <Translate zh_hant="開始創作" zh_hans="开始创作" />
+              </Button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <style jsx>{styles}</style>
-    <style jsx>{`
-      .slogan {
-        background-image: url(${IMAGE_SLOGAN_SM});
+      <style jsx>{styles}</style>
+      <style jsx>{`
+        .slogan {
+          background-image: url(${IMAGE_SLOGAN_SM});
 
-        @media (--md-up) {
-          background-image: url(${IMAGE_SLOGAN_MD});
-        }
-        @media (--lg-up) {
-          background-image: url(${IMAGE_SLOGAN_LG});
-        }
-        @media (--xl-up) {
-          background-image: url(${IMAGE_SLOGAN_XL});
+          @media (--md-up) {
+            background-image: url(${IMAGE_SLOGAN_MD});
+          }
+          @media (--lg-up) {
+            background-image: url(${IMAGE_SLOGAN_LG});
+          }
+          @media (--xl-up) {
+            background-image: url(${IMAGE_SLOGAN_XL});
+          }
         }
-      }
-    `}</style>
-  </section>
-)
+      `}</style>
+    </section>
+  )
+}
 
 export default Slogan
diff --git a/pages/Misc/About/index.tsx b/pages/Misc/About/index.tsx
@@ -1,5 +1,4 @@
 import { useContext, useEffect } from 'react'
-import { Waypoint } from 'react-waypoint'
 
 import { Head } from '~/components'
 import { HeaderContext } from '~/components/GlobalHeader/Context'
@@ -24,19 +23,6 @@ export default () => {
 
       <article>
         <Slogan />
-        <Waypoint
-          onEnter={() => {
-            updateHeaderState({ type: 'about', bgColor: 'transparent' })
-          }}
-          onLeave={() => {
-            updateHeaderState({ type: 'about', bgColor: 'default' })
-          }}
-          onPositionChange={({ currentPosition }) => {
-            if (currentPosition === 'above') {
-              updateHeaderState({ type: 'about', bgColor: 'default' })
-            }
-          }}
-        />
         <Goal />
         <Features />
         <Reports />