#26 add scroll functionality to header to change background color

Scout-NU · Mar 30, 2021 · c228412 · c228412
1 parent 48deb67
commit c228412
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js
@@ -1,8 +1,18 @@
-import styled from 'styled-components'
+import styled from "styled-components"
 import dimensions from "../../style/dimensions"
+import colors from "../../style/colors"
 
+export const NavContainer = styled.div`
+  background-color: ${colors.gray_image};
+  padding-bottom: 32px;
+  &.colorChange {
+    background-color: ${colors.gray_CTA};
+  }
 
-export const NavContainer = styled.div``
+  position: fixed;
+  width: 100%;
+  transition: 0.5s all ease;
+`
 
 export const Logo = styled.div`
   font-weight: bold;
@@ -15,7 +25,6 @@ export const Logo = styled.div`
     font-size: 20px;
     padding-top: 24px;
     padding-left: 0px;
-
   }
 `
 
@@ -48,4 +57,4 @@ export const MobileIcon = styled.div`
     top: 32px;
     position: absolute;
   }
-`
+`
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
@@ -10,9 +10,20 @@ import {
 
 export const Header = () => {
   const [open, setOpen] = useState(false)
+  const [colorChange, setColorchange] = useState(false);
+  const changeNavbarColor = () =>{
+     if(window.scrollY >= 80){
+       setColorchange(true);
+     }
+     else{
+       setColorchange(false);
+     }
+  };
+  window.addEventListener('scroll', changeNavbarColor);
+
 
   return (
-    <NavContainer>
+    <NavContainer className={colorChange ? 'navbar colorChange' : 'navbar'}>
       <Logo>PowerHouse</Logo>
 
       <MobileIcon onClick={() => setOpen(!open)} className={open ? "open" : ""}>