style: Change header background colour on scroll

src/components/Header/index.jsx

@@ -1,13 +1,26 @@
 import { Link } from "gatsby"
 import PropTypes from "prop-types"
-import React from "react"
+import React, { useState, useEffect } from "react"
 
 import styles from "./styles.module.css"
 import logo from "../../images/payments.png"
 
 const Header = ({ siteTitle }) => {
+  const [className, setClassName] = useState("")
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll)
+    return () => {
+      window.removeEventListener("scroll", handleScroll, true)
+    }
+  }, [])
+
+  const handleScroll = () => {
+    window.pageYOffset > 135 ? setClassName("scroll") : setClassName("")
+  }
+
   return (
-    <header>
+    <header className={styles[className]}>
       <div className={styles.menu}>
         <Link to="/">
           <h1>

src/components/Header/styles.module.css

@@ -1,8 +1,12 @@
 header {
   position: sticky;
-  background: #1a2730;
+  background: #18242c00;
   top: 0;
-  border-bottom: 1px solid #1a2730;
+}
+
+header.scroll {
+  z-index: 999;
+  background: #18242cf7;
 }
 
 .menu {