问题
- Summarize the problem
- The goal is for the styling of the header/navbar to change as the viewer scrolls down the page. The header is already sticky/fixed in place, but I want the background/text color to change once the user scrolls down. All other components are adhering to the styling that I want so far, but trying to figure out this header has really been confusing for me.
- Describe what you've tried
- I tried to use a hook that I found online here https://www.ibrahima-ndaw.com/blog/build-a-sticky-nav-with-react/ but am unsure how to translate from this react app to a Gatsby app (for instance, I have a Layout component and I import this into gatsby-browser.
- Another thing I tried was using this https://github.com/tailwindlabs/headlessui/blob/develop/packages/%40headlessui-react/README.md#component-api particularly the Transition component. It seems to suit my needs but I am wholly unable to understand how to get the Gatsby App to recognize any scroll events. I was able to at least test the component with the button example, and it worked, but the goal is to use some kind of scrolling event.
- Show some code -Here is my Header component (utilizing tailwindcss):
import React from 'react';
import '../styles/global.css';
import { Link } from 'gatsby';
const Header = () => {
return (
<header className="z-10 bg-transparent fixed w-full h-100px transition-all duration-300 ease-in delay-0 block box-border">
<div className="bg-transparent transition duration-75 ease-in shadow-none block box-border">
<div className="container relative px-15px mx-auto max-w-screen-xl block box-border">
<div className="w-full float-left relative block box-border capitalize tracking-wide antialiased">
<Link to="/" className="w-3/12 transition-colors duration-300 ease-linear delay-0 float-left mt-8 ml-12">
<svg className="md:hidden w-full h-auto" viewBox="0 0 180 40" xmlns="http://www.w3.org/2000/svg">
<g fillRule="nonzero" fill="#f4c5d2">
<path
d="M11.52 6.345c0 1.9-.629 3.342-1.883 4.325-1.174.906-2.806 1.358-4.895 1.358-.176 0-.57-.017-1.188-.05a28.089 28.089 0 0 0-1.425-.05c-.447 0-.944.022-1.49.067-.234.022-.351-.076-.351-.288 0-.145.117-.226.352-.249.536-.056.805-.346.805-.874V2.746c0-.296-.06-.494-.18-.597-.1-.082-.315-.16-.648-.23-.279-.055-.447-.1-.508-.14-.059-.036-.095-.12-.106-.245-.017-.129.042-.215.173-.252.025-.005.145-.016.358-.033C1.707 1.17 3.264 1.13 5.2 1.13c1.883 0 3.397.453 4.543 1.358 1.185.94 1.777 2.224 1.777 3.856zm-1.71.221c0-3.166-1.626-4.747-4.878-4.747H3.786c-.6.056-.9.22-.9.5v7.597c0 .534.143.891.425 1.07.285.182.852.271 1.704.271 3.197 0 4.795-1.565 4.795-4.691zM25.387 6.53c0 1.578-.584 2.914-1.752 4.012-1.146 1.08-2.523 1.62-4.133 1.62-1.693 0-3.095-.508-4.216-1.523-1.145-1.047-1.718-2.4-1.718-4.06 0-1.606.581-2.953 1.743-4.045C16.457 1.464 17.854.93 19.502.93c1.68 0 3.077.523 4.191 1.565 1.13 1.059 1.694 2.403 1.694 4.034zm-1.66.282c0-1.587-.433-2.845-1.302-3.767-.835-.885-1.94-1.327-3.308-1.327-1.134 0-2.068.42-2.797 1.257-.73.839-1.092 1.928-1.092 3.272 0 1.612.421 2.878 1.268 3.8.824.897 1.945 1.344 3.358 1.344 1.14 0 2.07-.419 2.792-1.26.72-.841 1.081-1.947 1.081-3.32zM39.186 7.032c0 .173-.128.28-.382.319-.36.056-.57.092-.632.114-.195.084-.293.24-.293.478v2.57c0 .325-.42.668-1.258 1.034-.944.411-2.003.615-3.18.615-1.71 0-3.134-.511-4.274-1.53-1.154-1.038-1.732-2.367-1.732-3.988 0-1.654.598-3.029 1.79-4.127C30.38 1.458 31.772.93 33.396.93c1.246 0 2.307.151 3.179.45.643.218.978.439 1.006.657.053.413.08 1.028.08 1.84 0 .182-.11.278-.337.289-.263.01-.422-.065-.484-.221-.298-.813-.72-1.4-1.262-1.758-.543-.357-1.286-.536-2.233-.536-1.307 0-2.327.402-3.065 1.204-.757.833-1.134 2.029-1.134 3.585 0 1.5.436 2.707 1.307 3.627.844.894 1.928 1.34 3.258 1.34.682 0 1.316-.122 1.903-.368.561-.235.841-.472.841-.713v-1.71c0-.405-.081-.698-.246-.88-.14-.165-.42-.31-.838-.436-.31-.092-.458-.203-.442-.335.023-.14.059-.226.112-.26.05-.033.182-.036.394-.008 1.163.145 2.288.156 3.384.034.061-.006.109-.009.148-.009.148 0 .22.104.22.31M57.943 1.495c0 .181-.176.327-.525.43-.375.115-.693.489-.95 1.129a442.017 442.017 0 0 0-3.423 8.68c-.087.23-.288.39-.6.479a.104.104 0 0 1-.06.017c-.15 0-.26-.166-.324-.492-.251-1.19-1.165-3.563-2.738-7.117a393.724 393.724 0 0 0-2.707 7.114c-.081.229-.277.388-.581.478-.023.005-.045.01-.068.017-.153 0-.26-.166-.318-.492-.21-1.098-1.408-4.088-3.599-8.972-.226-.503-.611-.816-1.156-.942-.269-.058-.403-.136-.403-.234 0-.227.118-.33.352-.308.847.076 1.903.023 3.172-.159.212-.033.346-.036.4-.008.05.025.08.103.097.232.028.103-.106.226-.4.374-.349.176-.525.374-.525.598 0 .098.025.212.075.344.545 1.447 1.42 3.752 2.616 6.91.039.105.092.156.156.156.062 0 .11-.05.148-.157l2.258-6.038-.369-.77c-.196-.409-.542-.727-1.04-.96-.25-.114-.368-.223-.351-.329.028-.24.15-.344.368-.31.967.16 2.054.176 3.256.05.218-.022.354-.02.405.011.053.031.078.115.078.255 0 .137-.14.248-.42.335-.536.168-.804.347-.804.53 0 .074.028.182.081.328l2.638 6.898c.039.112.095.165.165.165.061 0 .111-.056.156-.165l2.442-6.538a1.11 1.11 0 0 0 .067-.352c0-.374-.327-.673-.975-.891-.246-.081-.363-.204-.352-.366.011-.12.042-.193.09-.218.06-.028.209-.025.45.008a12.67 12.67 0 0 0 2.866.034c.235-.023.352.058.352.246M71.458 6.53c0 1.578-.584 2.914-1.752 4.012-1.146 1.08-2.523 1.62-4.133 1.62-1.693 0-3.095-.508-4.216-1.523-1.145-1.047-1.718-2.4-1.718-4.06 0-1.606.581-2.953 1.743-4.045C62.528 1.464 63.925.93 65.573.93c1.68 0 3.077.523 4.192 1.565 1.128 1.059 1.693 2.403 1.693 4.034zm-1.66.282c0-1.587-.433-2.845-1.302-3.767-.836-.885-1.939-1.327-3.308-1.327-1.135 0-2.068.42-2.797 1.257-.73.839-1.092 1.928-1.092 3.272 0 1.612.422 2.878 1.268 3.8.824.897 1.945 1.344 3.359 1.344 1.14 0 2.07-.419 2.79-1.26.722-.841 1.082-1.947 1.082-3.32zM85.324 6.53c0 1.578-.584 2.914-1.751 4.012-1.146 1.08-2.523 1.62-4.133 1.62-1.693 0-3.096-.508-4.216-1.523-1.146-1.047-1.718-2.4-1.718-4.06 0-1.606.58-2.953 1.743-4.045C76.395 1.464 77.792.93 79.44.93c1.68 0 3.077.523 4.191 1.565 1.13 1.059 1.693 2.403 1.693 4.034zm-1.66.282c0-1.587-.432-2.845-1.301-3.767-.836-.885-1.94-1.327-3.308-1.327-1.135 0-2.068.42-2.797 1.257-.73.839-1.093 1.928-1.093 3.272 0 1.612.422 2.878 1.269 3.8.824.897 1.945 1.344 3.358 1.344 1.14 0 2.07-.419 2.792-1.26.72-.841 1.08-1.947 1.08-3.32zM98.806 6.345c0 1.9-.629 3.342-1.883 4.325-1.174.906-2.805 1.358-4.896 1.358-.176 0-.57-.017-1.187-.05a28.089 28.089 0 0 0-1.425-.05c-.447 0-.944.022-1.49.067-.234.022-.351-.076-.351-.288 0-.145.117-.226.352-.249.536-.056.805-.346.805-.874V2.746c0-.296-.06-.494-.18-.597-.1-.082-.315-.16-.648-.23-.279-.055-.447-.1-.508-.14-.059-.036-.095-.12-.106-.245-.017-.129.042-.215.173-.252.025-.005.145-.016.358-.033 1.173-.079 2.73-.118 4.666-.118 1.883 0 3.397.453 4.543 1.358 1.184.94 1.777 2.224 1.777 3.856zm-1.71.221c0-3.166-1.626-4.747-4.878-4.747h-1.146c-.6.056-.9.22-.9.5v7.597c0 .534.143.891.425 1.07.285.182.852.271 1.704.271 3.197 0 4.795-1.565 4.795-4.691zM16.325 27.174c-.033.151-.066.238-.106.266-.033.022-.109.016-.229-.017-.78-.145-1.922-.162-3.422-.05-.285.022-.44-.034-.467-.165-.028-.154.061-.274.271-.355.59-.24.883-.461.883-.668 0-.084-.034-.198-.098-.352a89.934 89.934 0 0 0-1.006-2.333c-.388.022-1.07.034-2.048.034-.807 0-1.495-.023-2.062-.068-.19.47-.458 1.126-.802 1.965a1.438 1.438 0 0 0-.114.516c0 .305.167.529.5.671.514.218.766.386.754.5-.011.185-.184.26-.517.221-1.028-.112-1.978-.078-2.852.1-.23.05-.358-.033-.386-.245-.022-.143.157-.294.534-.458.405-.17.746-.56 1.025-1.174 1.06-2.308 1.746-3.825 2.054-4.551.751-1.744 1.282-3.163 1.598-4.264.042-.168.26-.324.65-.472.096-.034.213.125.356.475 1.179 2.835 2.5 5.867 3.965 9.097.232.514.628.855 1.184 1.023.252.072.364.173.335.304zm-4.445-4.311c-.36-.819-.922-2.087-1.685-3.806-.044-.092-.092-.14-.148-.14-.056 0-.1.048-.14.14L8.347 22.83c.584.045 1.238.067 1.964.067.447 0 .97-.01 1.57-.033zM29.32 21.756c0 1.9-.628 3.342-1.883 4.326-1.173.905-2.805 1.357-4.895 1.357-.176 0-.57-.016-1.187-.05a28.096 28.096 0 0 0-1.425-.05c-.447 0-.945.022-1.49.067-.234.022-.351-.075-.351-.288 0-.145.117-.226.352-.248.536-.056.804-.347.804-.875v-7.837c0-.297-.058-.495-.178-.598-.101-.081-.316-.16-.649-.23-.28-.055-.447-.1-.508-.139-.059-.036-.095-.12-.106-.246-.017-.129.042-.215.173-.251a5.73 5.73 0 0 1 .358-.034c1.173-.078 2.73-.117 4.666-.117 1.883 0 3.397.452 4.543 1.358 1.184.939 1.777 2.224 1.777 3.855zm-1.71.221c0-3.166-1.625-4.747-4.878-4.747h-1.145c-.601.056-.9.22-.9.5v7.597c0 .534.143.891.425 1.07.285.182.852.271 1.704.271 3.197 0 4.795-1.564 4.795-4.69zM43.305 16.78c0 .12-.03.207-.09.254-.06.05-.206.11-.441.182-.285.087-.604.461-.958 1.12-1.325 2.479-2.677 5.418-4.054 8.818-.093.235-.297.392-.607.47a.262.262 0 0 1-.05.017c-.126 0-.232-.165-.319-.492-.179-.682-.723-2.003-1.631-3.962-.906-1.959-1.772-3.674-2.599-5.144-.282-.511-.668-.819-1.154-.916-.268-.053-.402-.135-.402-.238 0-.254.117-.366.352-.338 1 .11 2.168.062 3.506-.145.196-.031.319-.042.366-.031.09.028.132.12.132.28 0 .125-.14.24-.417.337-.544.202-.818.414-.818.635 0 .092.033.204.098.335.558 1.093 1.628 3.467 3.207 7.122.053.12.106.179.154.179.045 0 .092-.059.148-.179a598.89 598.89 0 0 1 3.018-6.773.963.963 0 0 0 .08-.36c0-.344-.33-.629-.989-.858-.245-.086-.363-.215-.351-.383.016-.19.195-.262.539-.218 1.087.132 2.056.143 2.911.034.246-.034.369.05.369.254M49.374 16.755c0 .137-.146.249-.44.335-.656.193-.985.45-.985.766v7.963c0 .514.301.824.908.933.299.053.45.16.45.319 0 .134-.026.22-.079.251-.05.034-.193.045-.422.034-1.439-.06-2.553-.06-3.338 0-.202.016-.32-.023-.353-.115a.678.678 0 0 1-.016-.173c0-.112.123-.193.369-.249.458-.103.723-.179.793-.22.176-.11.263-.333.263-.671v-8.033c0-.453-.308-.73-.922-.835-.257-.042-.386-.12-.386-.235 0-.157.02-.252.062-.288.041-.036.136-.045.29-.028 1.065.112 2.163.104 3.297-.028.215-.025.338-.033.377-.022.087.028.132.125.132.296M58.949 24.489c0 .922-.338 1.66-1.014 2.215-.705.579-1.668.87-2.89.87-1.609 0-2.553-.297-2.83-.892-.17-.36-.338-.818-.508-1.374-.07-.257-.02-.425.156-.5.218-.098.388-.056.514.13.464.688.93 1.174 1.4 1.465.453.277.984.416 1.59.416 1.517 0 2.274-.606 2.274-1.816 0-.475-.167-.88-.5-1.212-.321-.31-.989-.741-1.998-1.286-1.28-.687-2.12-1.227-2.523-1.62-.497-.486-.746-1.087-.746-1.803 0-.757.319-1.402.953-1.939.637-.533 1.447-.801 2.437-.801.698 0 1.377.086 2.036.262.506.137.794.31.858.523.137.444.226.989.271 1.637.011.235-.067.366-.237.394-.213.033-.364-.042-.45-.221-.338-.682-.724-1.162-1.154-1.439-.4-.257-.92-.385-1.565-.385-.573 0-1.025.134-1.358.402-.332.266-.5.645-.5 1.137 0 .458.165.852.492 1.188.31.31.886.676 1.721 1.095 1.288.645 2.177 1.19 2.663 1.637.606.55.908 1.19.908 1.917M73.098 21.94c0 1.58-.584 2.915-1.752 4.013-1.146 1.081-2.523 1.62-4.133 1.62-1.692 0-3.095-.508-4.216-1.522-1.145-1.048-1.718-2.4-1.718-4.06 0-1.607.581-2.953 1.744-4.046 1.145-1.07 2.542-1.603 4.19-1.603 1.68 0 3.077.522 4.192 1.564 1.128 1.06 1.693 2.403 1.693 4.035zm-1.66.283c0-1.587-.433-2.844-1.302-3.766-.835-.886-1.939-1.328-3.308-1.328-1.134 0-2.068.42-2.797 1.258-.729.838-1.092 1.928-1.092 3.272 0 1.612.422 2.877 1.268 3.8.824.896 1.945 1.343 3.359 1.343 1.14 0 2.07-.419 2.79-1.26.722-.84 1.082-1.947 1.082-3.32zM84.886 27.353c.006.126-.1.187-.319.187-1.958 0-3.808-1.676-5.549-5.03l-1.072.051v3.431c0 .257.06.428.187.512.126.083.405.159.838.226.299.047.45.156.45.321 0 .137-.025.22-.073.254-.05.034-.187.045-.41.034a28.55 28.55 0 0 0-3.239.061c-.235.014-.352-.08-.352-.284 0-.143.117-.224.352-.246.537-.054.805-.347.805-.875v-7.84c0-.52-.302-.838-.908-.958-.3-.06-.45-.154-.45-.285 0-.201.1-.302.302-.302.061 0 .125.005.198.017.224.033.564.05 1.023.05.153 0 .536-.008 1.153-.025.618-.017 1.19-.025 1.719-.025 1.092 0 1.956.204 2.587.614.71.453 1.065 1.12 1.065 2.004 0 1.511-.872 2.511-2.615 2.998.555 1.265 1.21 2.35 1.96 3.255.77.927 1.462 1.441 2.077 1.54.17.027.26.13.27.315zM81.6 19.437c0-.807-.207-1.383-.623-1.726-.413-.344-1.079-.514-1.992-.514-.408 0-.685.056-.827.167-.143.112-.212.352-.212.724v3.853c1.32-.045 2.271-.277 2.852-.696.534-.385.802-.989.802-1.808zM93.55 24.489c0 .922-.338 1.66-1.014 2.215-.704.579-1.668.87-2.889.87-1.61 0-2.554-.297-2.83-.892-.17-.36-.338-.818-.509-1.374-.07-.257-.02-.425.156-.5.218-.098.389-.056.515.13.463.688.93 1.174 1.4 1.465.452.277.983.416 1.59.416 1.516 0 2.274-.606 2.274-1.816 0-.475-.168-.88-.5-1.212-.322-.31-.99-.741-1.998-1.286-1.28-.687-2.12-1.227-2.523-1.62-.498-.486-.746-1.087-.746-1.803 0-.757.318-1.402.953-1.939.637-.533 1.447-.801 2.436-.801.698 0 1.377.086 2.037.262.505.137.793.31.858.523.136.444.226.989.27 1.637.012.235-.067.366-.237.394-.212.033-.363-.042-.45-.221-.338-.682-.723-1.162-1.154-1.439-.4-.257-.919-.385-1.564-.385-.573 0-1.026.134-1.358.402-.333.266-.5.645-.5 1.137 0 .458.164.852.491 1.188.31.31.886.676 1.721 1.095 1.289.645 2.177 1.19 2.663 1.637.606.55.908 1.19.908 1.917" />
</g>
</svg>
<svg className="w-full" viewBox="0 0 150 30" xmlns="http://www.w3.org/2000/svg">
<g fillRule="nonzero" fill="#f4c5d2">
<path
d="M11.52 6.345c0 1.9-.629 3.342-1.883 4.325-1.174.906-2.806 1.358-4.895 1.358-.176 0-.57-.017-1.188-.05a28.089 28.089 0 0 0-1.425-.05c-.447 0-.944.022-1.49.067-.234.022-.351-.076-.351-.288 0-.145.117-.226.352-.249.536-.056.805-.346.805-.874V2.746c0-.296-.06-.494-.18-.597-.1-.082-.315-.16-.648-.23-.279-.055-.447-.1-.508-.14-.059-.036-.095-.12-.106-.245-.017-.129.042-.215.173-.252.025-.005.145-.016.358-.033C1.707 1.17 3.264 1.13 5.2 1.13c1.883 0 3.397.453 4.543 1.358 1.185.94 1.777 2.224 1.777 3.856zm-1.71.221c0-3.166-1.626-4.747-4.878-4.747H3.786c-.6.056-.9.22-.9.5v7.597c0 .534.143.891.425 1.07.285.182.852.271 1.704.271 3.197 0 4.795-1.565 4.795-4.691zM25.387 6.53c0 1.578-.584 2.914-1.752 4.012-1.146 1.08-2.523 1.62-4.133 1.62-1.693 0-3.095-.508-4.216-1.523-1.145-1.047-1.718-2.4-1.718-4.06 0-1.606.581-2.953 1.743-4.045C16.457 1.464 17.854.93 19.502.93c1.68 0 3.077.523 4.191 1.565 1.13 1.059 1.694 2.403 1.694 4.034zm-1.66.282c0-1.587-.433-2.845-1.302-3.767-.835-.885-1.94-1.327-3.308-1.327-1.134 0-2.068.42-2.797 1.257-.73.839-1.092 1.928-1.092 3.272 0 1.612.421 2.878 1.268 3.8.824.897 1.945 1.344 3.358 1.344 1.14 0 2.07-.419 2.792-1.26.72-.841 1.081-1.947 1.081-3.32zM39.186 7.032c0 .173-.128.28-.382.319-.36.056-.57.092-.632.114-.195.084-.293.24-.293.478v2.57c0 .325-.42.668-1.258 1.034-.944.411-2.003.615-3.18.615-1.71 0-3.134-.511-4.274-1.53-1.154-1.038-1.732-2.367-1.732-3.988 0-1.654.598-3.029 1.79-4.127C30.38 1.458 31.772.93 33.396.93c1.246 0 2.307.151 3.179.45.643.218.978.439 1.006.657.053.413.08 1.028.08 1.84 0 .182-.11.278-.337.289-.263.01-.422-.065-.484-.221-.298-.813-.72-1.4-1.262-1.758-.543-.357-1.286-.536-2.233-.536-1.307 0-2.327.402-3.065 1.204-.757.833-1.134 2.029-1.134 3.585 0 1.5.436 2.707 1.307 3.627.844.894 1.928 1.34 3.258 1.34.682 0 1.316-.122 1.903-.368.561-.235.841-.472.841-.713v-1.71c0-.405-.081-.698-.246-.88-.14-.165-.42-.31-.838-.436-.31-.092-.458-.203-.442-.335.023-.14.059-.226.112-.26.05-.033.182-.036.394-.008 1.163.145 2.288.156 3.384.034.061-.006.109-.009.148-.009.148 0 .22.104.22.31M57.943 1.495c0 .181-.176.327-.525.43-.375.115-.693.489-.95 1.129a442.017 442.017 0 0 0-3.423 8.68c-.087.23-.288.39-.6.479a.104.104 0 0 1-.06.017c-.15 0-.26-.166-.324-.492-.251-1.19-1.165-3.563-2.738-7.117a393.724 393.724 0 0 0-2.707 7.114c-.081.229-.277.388-.581.478-.023.005-.045.01-.068.017-.153 0-.26-.166-.318-.492-.21-1.098-1.408-4.088-3.599-8.972-.226-.503-.611-.816-1.156-.942-.269-.058-.403-.136-.403-.234 0-.227.118-.33.352-.308.847.076 1.903.023 3.172-.159.212-.033.346-.036.4-.008.05.025.08.103.097.232.028.103-.106.226-.4.374-.349.176-.525.374-.525.598 0 .098.025.212.075.344.545 1.447 1.42 3.752 2.616 6.91.039.105.092.156.156.156.062 0 .11-.05.148-.157l2.258-6.038-.369-.77c-.196-.409-.542-.727-1.04-.96-.25-.114-.368-.223-.351-.329.028-.24.15-.344.368-.31.967.16 2.054.176 3.256.05.218-.022.354-.02.405.011.053.031.078.115.078.255 0 .137-.14.248-.42.335-.536.168-.804.347-.804.53 0 .074.028.182.081.328l2.638 6.898c.039.112.095.165.165.165.061 0 .111-.056.156-.165l2.442-6.538a1.11 1.11 0 0 0 .067-.352c0-.374-.327-.673-.975-.891-.246-.081-.363-.204-.352-.366.011-.12.042-.193.09-.218.06-.028.209-.025.45.008a12.67 12.67 0 0 0 2.866.034c.235-.023.352.058.352.246M71.458 6.53c0 1.578-.584 2.914-1.752 4.012-1.146 1.08-2.523 1.62-4.133 1.62-1.693 0-3.095-.508-4.216-1.523-1.145-1.047-1.718-2.4-1.718-4.06 0-1.606.581-2.953 1.743-4.045C62.528 1.464 63.925.93 65.573.93c1.68 0 3.077.523 4.192 1.565 1.128 1.059 1.693 2.403 1.693 4.034zm-1.66.282c0-1.587-.433-2.845-1.302-3.767-.836-.885-1.939-1.327-3.308-1.327-1.135 0-2.068.42-2.797 1.257-.73.839-1.092 1.928-1.092 3.272 0 1.612.422 2.878 1.268 3.8.824.897 1.945 1.344 3.359 1.344 1.14 0 2.07-.419 2.79-1.26.722-.841 1.082-1.947 1.082-3.32zM85.324 6.53c0 1.578-.584 2.914-1.751 4.012-1.146 1.08-2.523 1.62-4.133 1.62-1.693 0-3.096-.508-4.216-1.523-1.146-1.047-1.718-2.4-1.718-4.06 0-1.606.58-2.953 1.743-4.045C76.395 1.464 77.792.93 79.44.93c1.68 0 3.077.523 4.191 1.565 1.13 1.059 1.693 2.403 1.693 4.034zm-1.66.282c0-1.587-.432-2.845-1.301-3.767-.836-.885-1.94-1.327-3.308-1.327-1.135 0-2.068.42-2.797 1.257-.73.839-1.093 1.928-1.093 3.272 0 1.612.422 2.878 1.269 3.8.824.897 1.945 1.344 3.358 1.344 1.14 0 2.07-.419 2.792-1.26.72-.841 1.08-1.947 1.08-3.32zM98.806 6.345c0 1.9-.629 3.342-1.883 4.325-1.174.906-2.805 1.358-4.896 1.358-.176 0-.57-.017-1.187-.05a28.089 28.089 0 0 0-1.425-.05c-.447 0-.944.022-1.49.067-.234.022-.351-.076-.351-.288 0-.145.117-.226.352-.249.536-.056.805-.346.805-.874V2.746c0-.296-.06-.494-.18-.597-.1-.082-.315-.16-.648-.23-.279-.055-.447-.1-.508-.14-.059-.036-.095-.12-.106-.245-.017-.129.042-.215.173-.252.025-.005.145-.016.358-.033 1.173-.079 2.73-.118 4.666-.118 1.883 0 3.397.453 4.543 1.358 1.184.94 1.777 2.224 1.777 3.856zm-1.71.221c0-3.166-1.626-4.747-4.878-4.747h-1.146c-.6.056-.9.22-.9.5v7.597c0 .534.143.891.425 1.07.285.182.852.271 1.704.271 3.197 0 4.795-1.565 4.795-4.691zM16.325 27.174c-.033.151-.066.238-.106.266-.033.022-.109.016-.229-.017-.78-.145-1.922-.162-3.422-.05-.285.022-.44-.034-.467-.165-.028-.154.061-.274.271-.355.59-.24.883-.461.883-.668 0-.084-.034-.198-.098-.352a89.934 89.934 0 0 0-1.006-2.333c-.388.022-1.07.034-2.048.034-.807 0-1.495-.023-2.062-.068-.19.47-.458 1.126-.802 1.965a1.438 1.438 0 0 0-.114.516c0 .305.167.529.5.671.514.218.766.386.754.5-.011.185-.184.26-.517.221-1.028-.112-1.978-.078-2.852.1-.23.05-.358-.033-.386-.245-.022-.143.157-.294.534-.458.405-.17.746-.56 1.025-1.174 1.06-2.308 1.746-3.825 2.054-4.551.751-1.744 1.282-3.163 1.598-4.264.042-.168.26-.324.65-.472.096-.034.213.125.356.475 1.179 2.835 2.5 5.867 3.965 9.097.232.514.628.855 1.184 1.023.252.072.364.173.335.304zm-4.445-4.311c-.36-.819-.922-2.087-1.685-3.806-.044-.092-.092-.14-.148-.14-.056 0-.1.048-.14.14L8.347 22.83c.584.045 1.238.067 1.964.067.447 0 .97-.01 1.57-.033zM29.32 21.756c0 1.9-.628 3.342-1.883 4.326-1.173.905-2.805 1.357-4.895 1.357-.176 0-.57-.016-1.187-.05a28.096 28.096 0 0 0-1.425-.05c-.447 0-.945.022-1.49.067-.234.022-.351-.075-.351-.288 0-.145.117-.226.352-.248.536-.056.804-.347.804-.875v-7.837c0-.297-.058-.495-.178-.598-.101-.081-.316-.16-.649-.23-.28-.055-.447-.1-.508-.139-.059-.036-.095-.12-.106-.246-.017-.129.042-.215.173-.251a5.73 5.73 0 0 1 .358-.034c1.173-.078 2.73-.117 4.666-.117 1.883 0 3.397.452 4.543 1.358 1.184.939 1.777 2.224 1.777 3.855zm-1.71.221c0-3.166-1.625-4.747-4.878-4.747h-1.145c-.601.056-.9.22-.9.5v7.597c0 .534.143.891.425 1.07.285.182.852.271 1.704.271 3.197 0 4.795-1.564 4.795-4.69zM43.305 16.78c0 .12-.03.207-.09.254-.06.05-.206.11-.441.182-.285.087-.604.461-.958 1.12-1.325 2.479-2.677 5.418-4.054 8.818-.093.235-.297.392-.607.47a.262.262 0 0 1-.05.017c-.126 0-.232-.165-.319-.492-.179-.682-.723-2.003-1.631-3.962-.906-1.959-1.772-3.674-2.599-5.144-.282-.511-.668-.819-1.154-.916-.268-.053-.402-.135-.402-.238 0-.254.117-.366.352-.338 1 .11 2.168.062 3.506-.145.196-.031.319-.042.366-.031.09.028.132.12.132.28 0 .125-.14.24-.417.337-.544.202-.818.414-.818.635 0 .092.033.204.098.335.558 1.093 1.628 3.467 3.207 7.122.053.12.106.179.154.179.045 0 .092-.059.148-.179a598.89 598.89 0 0 1 3.018-6.773.963.963 0 0 0 .08-.36c0-.344-.33-.629-.989-.858-.245-.086-.363-.215-.351-.383.016-.19.195-.262.539-.218 1.087.132 2.056.143 2.911.034.246-.034.369.05.369.254M49.374 16.755c0 .137-.146.249-.44.335-.656.193-.985.45-.985.766v7.963c0 .514.301.824.908.933.299.053.45.16.45.319 0 .134-.026.22-.079.251-.05.034-.193.045-.422.034-1.439-.06-2.553-.06-3.338 0-.202.016-.32-.023-.353-.115a.678.678 0 0 1-.016-.173c0-.112.123-.193.369-.249.458-.103.723-.179.793-.22.176-.11.263-.333.263-.671v-8.033c0-.453-.308-.73-.922-.835-.257-.042-.386-.12-.386-.235 0-.157.02-.252.062-.288.041-.036.136-.045.29-.028 1.065.112 2.163.104 3.297-.028.215-.025.338-.033.377-.022.087.028.132.125.132.296M58.949 24.489c0 .922-.338 1.66-1.014 2.215-.705.579-1.668.87-2.89.87-1.609 0-2.553-.297-2.83-.892-.17-.36-.338-.818-.508-1.374-.07-.257-.02-.425.156-.5.218-.098.388-.056.514.13.464.688.93 1.174 1.4 1.465.453.277.984.416 1.59.416 1.517 0 2.274-.606 2.274-1.816 0-.475-.167-.88-.5-1.212-.321-.31-.989-.741-1.998-1.286-1.28-.687-2.12-1.227-2.523-1.62-.497-.486-.746-1.087-.746-1.803 0-.757.319-1.402.953-1.939.637-.533 1.447-.801 2.437-.801.698 0 1.377.086 2.036.262.506.137.794.31.858.523.137.444.226.989.271 1.637.011.235-.067.366-.237.394-.213.033-.364-.042-.45-.221-.338-.682-.724-1.162-1.154-1.439-.4-.257-.92-.385-1.565-.385-.573 0-1.025.134-1.358.402-.332.266-.5.645-.5 1.137 0 .458.165.852.492 1.188.31.31.886.676 1.721 1.095 1.288.645 2.177 1.19 2.663 1.637.606.55.908 1.19.908 1.917M73.098 21.94c0 1.58-.584 2.915-1.752 4.013-1.146 1.081-2.523 1.62-4.133 1.62-1.692 0-3.095-.508-4.216-1.522-1.145-1.048-1.718-2.4-1.718-4.06 0-1.607.581-2.953 1.744-4.046 1.145-1.07 2.542-1.603 4.19-1.603 1.68 0 3.077.522 4.192 1.564 1.128 1.06 1.693 2.403 1.693 4.035zm-1.66.283c0-1.587-.433-2.844-1.302-3.766-.835-.886-1.939-1.328-3.308-1.328-1.134 0-2.068.42-2.797 1.258-.729.838-1.092 1.928-1.092 3.272 0 1.612.422 2.877 1.268 3.8.824.896 1.945 1.343 3.359 1.343 1.14 0 2.07-.419 2.79-1.26.722-.84 1.082-1.947 1.082-3.32zM84.886 27.353c.006.126-.1.187-.319.187-1.958 0-3.808-1.676-5.549-5.03l-1.072.051v3.431c0 .257.06.428.187.512.126.083.405.159.838.226.299.047.45.156.45.321 0 .137-.025.22-.073.254-.05.034-.187.045-.41.034a28.55 28.55 0 0 0-3.239.061c-.235.014-.352-.08-.352-.284 0-.143.117-.224.352-.246.537-.054.805-.347.805-.875v-7.84c0-.52-.302-.838-.908-.958-.3-.06-.45-.154-.45-.285 0-.201.1-.302.302-.302.061 0 .125.005.198.017.224.033.564.05 1.023.05.153 0 .536-.008 1.153-.025.618-.017 1.19-.025 1.719-.025 1.092 0 1.956.204 2.587.614.71.453 1.065 1.12 1.065 2.004 0 1.511-.872 2.511-2.615 2.998.555 1.265 1.21 2.35 1.96 3.255.77.927 1.462 1.441 2.077 1.54.17.027.26.13.27.315zM81.6 19.437c0-.807-.207-1.383-.623-1.726-.413-.344-1.079-.514-1.992-.514-.408 0-.685.056-.827.167-.143.112-.212.352-.212.724v3.853c1.32-.045 2.271-.277 2.852-.696.534-.385.802-.989.802-1.808zM93.55 24.489c0 .922-.338 1.66-1.014 2.215-.704.579-1.668.87-2.889.87-1.61 0-2.554-.297-2.83-.892-.17-.36-.338-.818-.509-1.374-.07-.257-.02-.425.156-.5.218-.098.389-.056.515.13.463.688.93 1.174 1.4 1.465.452.277.983.416 1.59.416 1.516 0 2.274-.606 2.274-1.816 0-.475-.168-.88-.5-1.212-.322-.31-.99-.741-1.998-1.286-1.28-.687-2.12-1.227-2.523-1.62-.498-.486-.746-1.087-.746-1.803 0-.757.318-1.402.953-1.939.637-.533 1.447-.801 2.436-.801.698 0 1.377.086 2.037.262.505.137.793.31.858.523.136.444.226.989.27 1.637.012.235-.067.366-.237.394-.212.033-.363-.042-.45-.221-.338-.682-.723-1.162-1.154-1.439-.4-.257-.919-.385-1.564-.385-.573 0-1.026.134-1.358.402-.333.266-.5.645-.5 1.137 0 .458.164.852.491 1.188.31.31.886.676 1.721 1.095 1.289.645 2.177 1.19 2.663 1.637.606.55.908 1.19.908 1.917" />
</g>
</svg>
</Link>
<ul className="h-90px max-h-400px mt-8 mr-12 p-0 list-none float-right block">
<li className="float-left ml-0.5 list-none px-2">
<Link
to="/services/"
className="text-white hover:text-pink-200 uppercase text-lg leading-100 py-0 px-12px inline-block no-underline transition-all duration-300 ease-in delay-0"
style={{fontFamily: 'EB Garamond, serif'}}
>
Services
</Link>
</li>
<li className="float-left ml-0.5 list-none px-2">
<Link
to="/about/"
className="text-white hover:text-pink-200 uppercase text-lg leading-100 py-0 px-12px inline-block no-underline transition-all duration-300 ease-in delay-0"
style={{fontFamily: 'EB Garamond, serif'}}
>
About Us
</Link>
</li>
<li className="float-left ml-0.5 list-none px-2">
<Link
to="/news/"
className="text-white hover:text-pink-200 uppercase text-lg leading-100 py-0 px-12px inline-block no-underline transition-all duration-300 ease-in delay-0"
style={{fontFamily: 'EB Garamond, serif'}}
>
News
</Link>
</li>
<li className="float-left ml-0.5 list-none px-2">
<Link
to="/contact/"
className="text-white hover:text-pink-200 uppercase text-lg leading-100 py-0 px-12px inline-block no-underline transition-all duration-300 ease-in delay-0"
style={{fontFamily: 'EB Garamond, serif'}}
>
Contact
</Link>
</li>
</ul>
</div>
</div>
</div>
</header>
);
}
export default Header;
-here is Layout.js
import React from 'react';
import Header from './Header';
// import TestHeader from './TestHeader';
// import Navbar from './Navbar';
import Footer from './Footer';
const Layout = ({ children }) => {
return (
<>
<Header />
{children}
<Footer />
</>
);
}
export default Layout;
-here is gatsby-browser.js
import React from 'react';
import Layout from './src/components/Layout';
import './src/styles/global.css';
export function wrapPageElement({ element, props }) {
return <Layout {...props}>{element}</Layout>;
}
回答1:
The easiest way is by creating a custom hook to track the current scroll position. Something like this:
import { useLayoutEffect, useRef } from 'react';
const isBrowser = typeof window !== `undefined`;
const getScrollPosition = ({ element, useWindow }) => {
if (!isBrowser) return { x: 0, y: 0 };
const target = element ? element.current : document.body,
position = target.getBoundingClientRect();
return useWindow
? { x: window.scrollX, y: window.scrollY }
: { x: position.left, y: position.top };
};
export const useScrollPosition = (effect, deps, element, useWindow, wait) => {
const position = useRef(getScrollPosition({ useWindow }));
let throttleTimeout = null;
const callBack = () => {
const currentPosition = getScrollPosition({ element, useWindow });
effect({ previousPosition: position.current, currentPosition: currentPosition });
position.current = currentPosition;
throttleTimeout = null;
};
useLayoutEffect(() => {
const handleScroll = () => {
if (wait && !throttleTimeout) throttleTimeout = setTimeout(callBack, wait);
else callBack();
};
window.addEventListener(`scroll`, handleScroll);
return () => window.removeEventListener(`scroll`, handleScroll);
}, deps);
};
Name it whatever you want, I've used useScrollPosition.js for this example.
Then, import it in your desired file:
import React from 'react';
import '../styles/global.css';
import { Link } from 'gatsby';
const Header = () => {
const [scroll, setScroll] = useState(0);
useScrollPosition(function setScrollPosition ({ currentPosition }) {
setScroll(currentPosition.y);
});
return (
<header className={`z-10 bg-transparent fixed w-full h-100px transition-all duration-300 ease-in delay-0 block box-border ${scroll > 150 ? 'someClass' :'' }`}>
<div className="bg-transparent transition duration-75 ease-in shadow-none block box-border">
<div className="container relative px-15px mx-auto max-w-screen-xl block box-border">
<div className="w-full float-left relative block box-border capitalize tracking-wide antialiased">
<Link to="/" className="w-3/12 transition-colors duration-300 ease-linear delay-0 float-left mt-8 ml-12">
<svg className="md:hidden w-full h-auto" viewBox="0 0 180 40" xmlns="http://www.w3.org/2000/svg">
<g fillRule="nonzero" fill="#f4c5d2">
<path
d="M11.52 6.345c0 1.9-.629 3.342-1.883 4.325-1.174.906-2.806 1.358-4.895 1.358-.176 0-.57-.017-1.188-.05a28.089 28.089 0 0 0-1.425-.05c-.447 0-.944.022-1.49.067-.234.022-.351-.076-.351-.288 0-.145.117-.226.352-.249.536-.056.805-.346.805-.874V2.746c0-.296-.06-.494-.18-.597-.1-.082-.315-.16-.648-.23-.279-.055-.447-.1-.508-.14-.059-.036-.095-.12-.106-.245-.017-.129.042-.215.173-.252.025-.005.145-.016.358-.033C1.707 1.17 3.264 1.13 5.2 1.13c1.883 0 3.397.453 4.543 1.358 1.185.94 1.777 2.224 1.777 3.856zm-1.71.221c0-3.166-1.626-4.747-4.878-4.747H3.786c-.6.056-.9.22-.9.5v7.597c0 .534.143.891.425 1.07.285.182.852.271 1.704.271 3.197 0 4.795-1.565 4.795-4.691zM25.387 6.53c0 1.578-.584 2.914-1.752 4.012-1.146 1.08-2.523 1.62-4.133 1.62-1.693 0-3.095-.508-4.216-1.523-1.145-1.047-1.718-2.4-1.718-4.06 0-1.606.581-2.953 1.743-4.045C16.457 1.464 17.854.93 19.502.93c1.68 0 3.077.523 4.191 1.565 1.13 1.059 1.694 2.403 1.694 4.034zm-1.66.282c0-1.587-.433-2.845-1.302-3.767-.835-.885-1.94-1.327-3.308-1.327-1.134 0-2.068.42-2.797 1.257-.73.839-1.092 1.928-1.092 3.272 0 1.612.421 2.878 1.268 3.8.824.897 1.945 1.344 3.358 1.344 1.14 0 2.07-.419 2.792-1.26.72-.841 1.081-1.947 1.081-3.32zM39.186 7.032c0 .173-.128.28-.382.319-.36.056-.57.092-.632.114-.195.084-.293.24-.293.478v2.57c0 .325-.42.668-1.258 1.034-.944.411-2.003.615-3.18.615-1.71 0-3.134-.511-4.274-1.53-1.154-1.038-1.732-2.367-1.732-3.988 0-1.654.598-3.029 1.79-4.127C30.38 1.458 31.772.93 33.396.93c1.246 0 2.307.151 3.179.45.643.218.978.439 1.006.657.053.413.08 1.028.08 1.84 0 .182-.11.278-.337.289-.263.01-.422-.065-.484-.221-.298-.813-.72-1.4-1.262-1.758-.543-.357-1.286-.536-2.233-.536-1.307 0-2.327.402-3.065 1.204-.757.833-1.134 2.029-1.134 3.585 0 1.5.436 2.707 1.307 3.627.844.894 1.928 1.34 3.258 1.34.682 0 1.316-.122 1.903-.368.561-.235.841-.472.841-.713v-1.71c0-.405-.081-.698-.246-.88-.14-.165-.42-.31-.838-.436-.31-.092-.458-.203-.442-.335.023-.14.059-.226.112-.26.05-.033.182-.036.394-.008 1.163.145 2.288.156 3.384.034.061-.006.109-.009.148-.009.148 0 .22.104.22.31M57.943 1.495c0 .181-.176.327-.525.43-.375.115-.693.489-.95 1.129a442.017 442.017 0 0 0-3.423 8.68c-.087.23-.288.39-.6.479a.104.104 0 0 1-.06.017c-.15 0-.26-.166-.324-.492-.251-1.19-1.165-3.563-2.738-7.117a393.724 393.724 0 0 0-2.707 7.114c-.081.229-.277.388-.581.478-.023.005-.045.01-.068.017-.153 0-.26-.166-.318-.492-.21-1.098-1.408-4.088-3.599-8.972-.226-.503-.611-.816-1.156-.942-.269-.058-.403-.136-.403-.234 0-.227.118-.33.352-.308.847.076 1.903.023 3.172-.159.212-.033.346-.036.4-.008.05.025.08.103.097.232.028.103-.106.226-.4.374-.349.176-.525.374-.525.598 0 .098.025.212.075.344.545 1.447 1.42 3.752 2.616 6.91.039.105.092.156.156.156.062 0 .11-.05.148-.157l2.258-6.038-.369-.77c-.196-.409-.542-.727-1.04-.96-.25-.114-.368-.223-.351-.329.028-.24.15-.344.368-.31.967.16 2.054.176 3.256.05.218-.022.354-.02.405.011.053.031.078.115.078.255 0 .137-.14.248-.42.335-.536.168-.804.347-.804.53 0 .074.028.182.081.328l2.638 6.898c.039.112.095.165.165.165.061 0 .111-.056.156-.165l2.442-6.538a1.11 1.11 0 0 0 .067-.352c0-.374-.327-.673-.975-.891-.246-.081-.363-.204-.352-.366.011-.12.042-.193.09-.218.06-.028.209-.025.45.008a12.67 12.67 0 0 0 2.866.034c.235-.023.352.058.352.246M71.458 6.53c0 1.578-.584 2.914-1.752 4.012-1.146 1.08-2.523 1.62-4.133 1.62-1.693 0-3.095-.508-4.216-1.523-1.145-1.047-1.718-2.4-1.718-4.06 0-1.606.581-2.953 1.743-4.045C62.528 1.464 63.925.93 65.573.93c1.68 0 3.077.523 4.192 1.565 1.128 1.059 1.693 2.403 1.693 4.034zm-1.66.282c0-1.587-.433-2.845-1.302-3.767-.836-.885-1.939-1.327-3.308-1.327-1.135 0-2.068.42-2.797 1.257-.73.839-1.092 1.928-1.092 3.272 0 1.612.422 2.878 1.268 3.8.824.897 1.945 1.344 3.359 1.344 1.14 0 2.07-.419 2.79-1.26.722-.841 1.082-1.947 1.082-3.32zM85.324 6.53c0 1.578-.584 2.914-1.751 4.012-1.146 1.08-2.523 1.62-4.133 1.62-1.693 0-3.096-.508-4.216-1.523-1.146-1.047-1.718-2.4-1.718-4.06 0-1.606.58-2.953 1.743-4.045C76.395 1.464 77.792.93 79.44.93c1.68 0 3.077.523 4.191 1.565 1.13 1.059 1.693 2.403 1.693 4.034zm-1.66.282c0-1.587-.432-2.845-1.301-3.767-.836-.885-1.94-1.327-3.308-1.327-1.135 0-2.068.42-2.797 1.257-.73.839-1.093 1.928-1.093 3.272 0 1.612.422 2.878 1.269 3.8.824.897 1.945 1.344 3.358 1.344 1.14 0 2.07-.419 2.792-1.26.72-.841 1.08-1.947 1.08-3.32zM98.806 6.345c0 1.9-.629 3.342-1.883 4.325-1.174.906-2.805 1.358-4.896 1.358-.176 0-.57-.017-1.187-.05a28.089 28.089 0 0 0-1.425-.05c-.447 0-.944.022-1.49.067-.234.022-.351-.076-.351-.288 0-.145.117-.226.352-.249.536-.056.805-.346.805-.874V2.746c0-.296-.06-.494-.18-.597-.1-.082-.315-.16-.648-.23-.279-.055-.447-.1-.508-.14-.059-.036-.095-.12-.106-.245-.017-.129.042-.215.173-.252.025-.005.145-.016.358-.033 1.173-.079 2.73-.118 4.666-.118 1.883 0 3.397.453 4.543 1.358 1.184.94 1.777 2.224 1.777 3.856zm-1.71.221c0-3.166-1.626-4.747-4.878-4.747h-1.146c-.6.056-.9.22-.9.5v7.597c0 .534.143.891.425 1.07.285.182.852.271 1.704.271 3.197 0 4.795-1.565 4.795-4.691zM16.325 27.174c-.033.151-.066.238-.106.266-.033.022-.109.016-.229-.017-.78-.145-1.922-.162-3.422-.05-.285.022-.44-.034-.467-.165-.028-.154.061-.274.271-.355.59-.24.883-.461.883-.668 0-.084-.034-.198-.098-.352a89.934 89.934 0 0 0-1.006-2.333c-.388.022-1.07.034-2.048.034-.807 0-1.495-.023-2.062-.068-.19.47-.458 1.126-.802 1.965a1.438 1.438 0 0 0-.114.516c0 .305.167.529.5.671.514.218.766.386.754.5-.011.185-.184.26-.517.221-1.028-.112-1.978-.078-2.852.1-.23.05-.358-.033-.386-.245-.022-.143.157-.294.534-.458.405-.17.746-.56 1.025-1.174 1.06-2.308 1.746-3.825 2.054-4.551.751-1.744 1.282-3.163 1.598-4.264.042-.168.26-.324.65-.472.096-.034.213.125.356.475 1.179 2.835 2.5 5.867 3.965 9.097.232.514.628.855 1.184 1.023.252.072.364.173.335.304zm-4.445-4.311c-.36-.819-.922-2.087-1.685-3.806-.044-.092-.092-.14-.148-.14-.056 0-.1.048-.14.14L8.347 22.83c.584.045 1.238.067 1.964.067.447 0 .97-.01 1.57-.033zM29.32 21.756c0 1.9-.628 3.342-1.883 4.326-1.173.905-2.805 1.357-4.895 1.357-.176 0-.57-.016-1.187-.05a28.096 28.096 0 0 0-1.425-.05c-.447 0-.945.022-1.49.067-.234.022-.351-.075-.351-.288 0-.145.117-.226.352-.248.536-.056.804-.347.804-.875v-7.837c0-.297-.058-.495-.178-.598-.101-.081-.316-.16-.649-.23-.28-.055-.447-.1-.508-.139-.059-.036-.095-.12-.106-.246-.017-.129.042-.215.173-.251a5.73 5.73 0 0 1 .358-.034c1.173-.078 2.73-.117 4.666-.117 1.883 0 3.397.452 4.543 1.358 1.184.939 1.777 2.224 1.777 3.855zm-1.71.221c0-3.166-1.625-4.747-4.878-4.747h-1.145c-.601.056-.9.22-.9.5v7.597c0 .534.143.891.425 1.07.285.182.852.271 1.704.271 3.197 0 4.795-1.564 4.795-4.69zM43.305 16.78c0 .12-.03.207-.09.254-.06.05-.206.11-.441.182-.285.087-.604.461-.958 1.12-1.325 2.479-2.677 5.418-4.054 8.818-.093.235-.297.392-.607.47a.262.262 0 0 1-.05.017c-.126 0-.232-.165-.319-.492-.179-.682-.723-2.003-1.631-3.962-.906-1.959-1.772-3.674-2.599-5.144-.282-.511-.668-.819-1.154-.916-.268-.053-.402-.135-.402-.238 0-.254.117-.366.352-.338 1 .11 2.168.062 3.506-.145.196-.031.319-.042.366-.031.09.028.132.12.132.28 0 .125-.14.24-.417.337-.544.202-.818.414-.818.635 0 .092.033.204.098.335.558 1.093 1.628 3.467 3.207 7.122.053.12.106.179.154.179.045 0 .092-.059.148-.179a598.89 598.89 0 0 1 3.018-6.773.963.963 0 0 0 .08-.36c0-.344-.33-.629-.989-.858-.245-.086-.363-.215-.351-.383.016-.19.195-.262.539-.218 1.087.132 2.056.143 2.911.034.246-.034.369.05.369.254M49.374 16.755c0 .137-.146.249-.44.335-.656.193-.985.45-.985.766v7.963c0 .514.301.824.908.933.299.053.45.16.45.319 0 .134-.026.22-.079.251-.05.034-.193.045-.422.034-1.439-.06-2.553-.06-3.338 0-.202.016-.32-.023-.353-.115a.678.678 0 0 1-.016-.173c0-.112.123-.193.369-.249.458-.103.723-.179.793-.22.176-.11.263-.333.263-.671v-8.033c0-.453-.308-.73-.922-.835-.257-.042-.386-.12-.386-.235 0-.157.02-.252.062-.288.041-.036.136-.045.29-.028 1.065.112 2.163.104 3.297-.028.215-.025.338-.033.377-.022.087.028.132.125.132.296M58.949 24.489c0 .922-.338 1.66-1.014 2.215-.705.579-1.668.87-2.89.87-1.609 0-2.553-.297-2.83-.892-.17-.36-.338-.818-.508-1.374-.07-.257-.02-.425.156-.5.218-.098.388-.056.514.13.464.688.93 1.174 1.4 1.465.453.277.984.416 1.59.416 1.517 0 2.274-.606 2.274-1.816 0-.475-.167-.88-.5-1.212-.321-.31-.989-.741-1.998-1.286-1.28-.687-2.12-1.227-2.523-1.62-.497-.486-.746-1.087-.746-1.803 0-.757.319-1.402.953-1.939.637-.533 1.447-.801 2.437-.801.698 0 1.377.086 2.036.262.506.137.794.31.858.523.137.444.226.989.271 1.637.011.235-.067.366-.237.394-.213.033-.364-.042-.45-.221-.338-.682-.724-1.162-1.154-1.439-.4-.257-.92-.385-1.565-.385-.573 0-1.025.134-1.358.402-.332.266-.5.645-.5 1.137 0 .458.165.852.492 1.188.31.31.886.676 1.721 1.095 1.288.645 2.177 1.19 2.663 1.637.606.55.908 1.19.908 1.917M73.098 21.94c0 1.58-.584 2.915-1.752 4.013-1.146 1.081-2.523 1.62-4.133 1.62-1.692 0-3.095-.508-4.216-1.522-1.145-1.048-1.718-2.4-1.718-4.06 0-1.607.581-2.953 1.744-4.046 1.145-1.07 2.542-1.603 4.19-1.603 1.68 0 3.077.522 4.192 1.564 1.128 1.06 1.693 2.403 1.693 4.035zm-1.66.283c0-1.587-.433-2.844-1.302-3.766-.835-.886-1.939-1.328-3.308-1.328-1.134 0-2.068.42-2.797 1.258-.729.838-1.092 1.928-1.092 3.272 0 1.612.422 2.877 1.268 3.8.824.896 1.945 1.343 3.359 1.343 1.14 0 2.07-.419 2.79-1.26.722-.84 1.082-1.947 1.082-3.32zM84.886 27.353c.006.126-.1.187-.319.187-1.958 0-3.808-1.676-5.549-5.03l-1.072.051v3.431c0 .257.06.428.187.512.126.083.405.159.838.226.299.047.45.156.45.321 0 .137-.025.22-.073.254-.05.034-.187.045-.41.034a28.55 28.55 0 0 0-3.239.061c-.235.014-.352-.08-.352-.284 0-.143.117-.224.352-.246.537-.054.805-.347.805-.875v-7.84c0-.52-.302-.838-.908-.958-.3-.06-.45-.154-.45-.285 0-.201.1-.302.302-.302.061 0 .125.005.198.017.224.033.564.05 1.023.05.153 0 .536-.008 1.153-.025.618-.017 1.19-.025 1.719-.025 1.092 0 1.956.204 2.587.614.71.453 1.065 1.12 1.065 2.004 0 1.511-.872 2.511-2.615 2.998.555 1.265 1.21 2.35 1.96 3.255.77.927 1.462 1.441 2.077 1.54.17.027.26.13.27.315zM81.6 19.437c0-.807-.207-1.383-.623-1.726-.413-.344-1.079-.514-1.992-.514-.408 0-.685.056-.827.167-.143.112-.212.352-.212.724v3.853c1.32-.045 2.271-.277 2.852-.696.534-.385.802-.989.802-1.808zM93.55 24.489c0 .922-.338 1.66-1.014 2.215-.704.579-1.668.87-2.889.87-1.61 0-2.554-.297-2.83-.892-.17-.36-.338-.818-.509-1.374-.07-.257-.02-.425.156-.5.218-.098.389-.056.515.13.463.688.93 1.174 1.4 1.465.452.277.983.416 1.59.416 1.516 0 2.274-.606 2.274-1.816 0-.475-.168-.88-.5-1.212-.322-.31-.99-.741-1.998-1.286-1.28-.687-2.12-1.227-2.523-1.62-.498-.486-.746-1.087-.746-1.803 0-.757.318-1.402.953-1.939.637-.533 1.447-.801 2.436-.801.698 0 1.377.086 2.037.262.505.137.793.31.858.523.136.444.226.989.27 1.637.012.235-.067.366-.237.394-.212.033-.363-.042-.45-.221-.338-.682-.723-1.162-1.154-1.439-.4-.257-.919-.385-1.564-.385-.573 0-1.026.134-1.358.402-.333.266-.5.645-.5 1.137 0 .458.164.852.491 1.188.31.31.886.676 1.721 1.095 1.289.645 2.177 1.19 2.663 1.637.606.55.908 1.19.908 1.917" />
</g>
</svg>
<svg className="w-full" viewBox="0 0 150 30" xmlns="http://www.w3.org/2000/svg">
<g fillRule="nonzero" fill="#f4c5d2">
<path
d="M11.52 6.345c0 1.9-.629 3.342-1.883 4.325-1.174.906-2.806 1.358-4.895 1.358-.176 0-.57-.017-1.188-.05a28.089 28.089 0 0 0-1.425-.05c-.447 0-.944.022-1.49.067-.234.022-.351-.076-.351-.288 0-.145.117-.226.352-.249.536-.056.805-.346.805-.874V2.746c0-.296-.06-.494-.18-.597-.1-.082-.315-.16-.648-.23-.279-.055-.447-.1-.508-.14-.059-.036-.095-.12-.106-.245-.017-.129.042-.215.173-.252.025-.005.145-.016.358-.033C1.707 1.17 3.264 1.13 5.2 1.13c1.883 0 3.397.453 4.543 1.358 1.185.94 1.777 2.224 1.777 3.856zm-1.71.221c0-3.166-1.626-4.747-4.878-4.747H3.786c-.6.056-.9.22-.9.5v7.597c0 .534.143.891.425 1.07.285.182.852.271 1.704.271 3.197 0 4.795-1.565 4.795-4.691zM25.387 6.53c0 1.578-.584 2.914-1.752 4.012-1.146 1.08-2.523 1.62-4.133 1.62-1.693 0-3.095-.508-4.216-1.523-1.145-1.047-1.718-2.4-1.718-4.06 0-1.606.581-2.953 1.743-4.045C16.457 1.464 17.854.93 19.502.93c1.68 0 3.077.523 4.191 1.565 1.13 1.059 1.694 2.403 1.694 4.034zm-1.66.282c0-1.587-.433-2.845-1.302-3.767-.835-.885-1.94-1.327-3.308-1.327-1.134 0-2.068.42-2.797 1.257-.73.839-1.092 1.928-1.092 3.272 0 1.612.421 2.878 1.268 3.8.824.897 1.945 1.344 3.358 1.344 1.14 0 2.07-.419 2.792-1.26.72-.841 1.081-1.947 1.081-3.32zM39.186 7.032c0 .173-.128.28-.382.319-.36.056-.57.092-.632.114-.195.084-.293.24-.293.478v2.57c0 .325-.42.668-1.258 1.034-.944.411-2.003.615-3.18.615-1.71 0-3.134-.511-4.274-1.53-1.154-1.038-1.732-2.367-1.732-3.988 0-1.654.598-3.029 1.79-4.127C30.38 1.458 31.772.93 33.396.93c1.246 0 2.307.151 3.179.45.643.218.978.439 1.006.657.053.413.08 1.028.08 1.84 0 .182-.11.278-.337.289-.263.01-.422-.065-.484-.221-.298-.813-.72-1.4-1.262-1.758-.543-.357-1.286-.536-2.233-.536-1.307 0-2.327.402-3.065 1.204-.757.833-1.134 2.029-1.134 3.585 0 1.5.436 2.707 1.307 3.627.844.894 1.928 1.34 3.258 1.34.682 0 1.316-.122 1.903-.368.561-.235.841-.472.841-.713v-1.71c0-.405-.081-.698-.246-.88-.14-.165-.42-.31-.838-.436-.31-.092-.458-.203-.442-.335.023-.14.059-.226.112-.26.05-.033.182-.036.394-.008 1.163.145 2.288.156 3.384.034.061-.006.109-.009.148-.009.148 0 .22.104.22.31M57.943 1.495c0 .181-.176.327-.525.43-.375.115-.693.489-.95 1.129a442.017 442.017 0 0 0-3.423 8.68c-.087.23-.288.39-.6.479a.104.104 0 0 1-.06.017c-.15 0-.26-.166-.324-.492-.251-1.19-1.165-3.563-2.738-7.117a393.724 393.724 0 0 0-2.707 7.114c-.081.229-.277.388-.581.478-.023.005-.045.01-.068.017-.153 0-.26-.166-.318-.492-.21-1.098-1.408-4.088-3.599-8.972-.226-.503-.611-.816-1.156-.942-.269-.058-.403-.136-.403-.234 0-.227.118-.33.352-.308.847.076 1.903.023 3.172-.159.212-.033.346-.036.4-.008.05.025.08.103.097.232.028.103-.106.226-.4.374-.349.176-.525.374-.525.598 0 .098.025.212.075.344.545 1.447 1.42 3.752 2.616 6.91.039.105.092.156.156.156.062 0 .11-.05.148-.157l2.258-6.038-.369-.77c-.196-.409-.542-.727-1.04-.96-.25-.114-.368-.223-.351-.329.028-.24.15-.344.368-.31.967.16 2.054.176 3.256.05.218-.022.354-.02.405.011.053.031.078.115.078.255 0 .137-.14.248-.42.335-.536.168-.804.347-.804.53 0 .074.028.182.081.328l2.638 6.898c.039.112.095.165.165.165.061 0 .111-.056.156-.165l2.442-6.538a1.11 1.11 0 0 0 .067-.352c0-.374-.327-.673-.975-.891-.246-.081-.363-.204-.352-.366.011-.12.042-.193.09-.218.06-.028.209-.025.45.008a12.67 12.67 0 0 0 2.866.034c.235-.023.352.058.352.246M71.458 6.53c0 1.578-.584 2.914-1.752 4.012-1.146 1.08-2.523 1.62-4.133 1.62-1.693 0-3.095-.508-4.216-1.523-1.145-1.047-1.718-2.4-1.718-4.06 0-1.606.581-2.953 1.743-4.045C62.528 1.464 63.925.93 65.573.93c1.68 0 3.077.523 4.192 1.565 1.128 1.059 1.693 2.403 1.693 4.034zm-1.66.282c0-1.587-.433-2.845-1.302-3.767-.836-.885-1.939-1.327-3.308-1.327-1.135 0-2.068.42-2.797 1.257-.73.839-1.092 1.928-1.092 3.272 0 1.612.422 2.878 1.268 3.8.824.897 1.945 1.344 3.359 1.344 1.14 0 2.07-.419 2.79-1.26.722-.841 1.082-1.947 1.082-3.32zM85.324 6.53c0 1.578-.584 2.914-1.751 4.012-1.146 1.08-2.523 1.62-4.133 1.62-1.693 0-3.096-.508-4.216-1.523-1.146-1.047-1.718-2.4-1.718-4.06 0-1.606.58-2.953 1.743-4.045C76.395 1.464 77.792.93 79.44.93c1.68 0 3.077.523 4.191 1.565 1.13 1.059 1.693 2.403 1.693 4.034zm-1.66.282c0-1.587-.432-2.845-1.301-3.767-.836-.885-1.94-1.327-3.308-1.327-1.135 0-2.068.42-2.797 1.257-.73.839-1.093 1.928-1.093 3.272 0 1.612.422 2.878 1.269 3.8.824.897 1.945 1.344 3.358 1.344 1.14 0 2.07-.419 2.792-1.26.72-.841 1.08-1.947 1.08-3.32zM98.806 6.345c0 1.9-.629 3.342-1.883 4.325-1.174.906-2.805 1.358-4.896 1.358-.176 0-.57-.017-1.187-.05a28.089 28.089 0 0 0-1.425-.05c-.447 0-.944.022-1.49.067-.234.022-.351-.076-.351-.288 0-.145.117-.226.352-.249.536-.056.805-.346.805-.874V2.746c0-.296-.06-.494-.18-.597-.1-.082-.315-.16-.648-.23-.279-.055-.447-.1-.508-.14-.059-.036-.095-.12-.106-.245-.017-.129.042-.215.173-.252.025-.005.145-.016.358-.033 1.173-.079 2.73-.118 4.666-.118 1.883 0 3.397.453 4.543 1.358 1.184.94 1.777 2.224 1.777 3.856zm-1.71.221c0-3.166-1.626-4.747-4.878-4.747h-1.146c-.6.056-.9.22-.9.5v7.597c0 .534.143.891.425 1.07.285.182.852.271 1.704.271 3.197 0 4.795-1.565 4.795-4.691zM16.325 27.174c-.033.151-.066.238-.106.266-.033.022-.109.016-.229-.017-.78-.145-1.922-.162-3.422-.05-.285.022-.44-.034-.467-.165-.028-.154.061-.274.271-.355.59-.24.883-.461.883-.668 0-.084-.034-.198-.098-.352a89.934 89.934 0 0 0-1.006-2.333c-.388.022-1.07.034-2.048.034-.807 0-1.495-.023-2.062-.068-.19.47-.458 1.126-.802 1.965a1.438 1.438 0 0 0-.114.516c0 .305.167.529.5.671.514.218.766.386.754.5-.011.185-.184.26-.517.221-1.028-.112-1.978-.078-2.852.1-.23.05-.358-.033-.386-.245-.022-.143.157-.294.534-.458.405-.17.746-.56 1.025-1.174 1.06-2.308 1.746-3.825 2.054-4.551.751-1.744 1.282-3.163 1.598-4.264.042-.168.26-.324.65-.472.096-.034.213.125.356.475 1.179 2.835 2.5 5.867 3.965 9.097.232.514.628.855 1.184 1.023.252.072.364.173.335.304zm-4.445-4.311c-.36-.819-.922-2.087-1.685-3.806-.044-.092-.092-.14-.148-.14-.056 0-.1.048-.14.14L8.347 22.83c.584.045 1.238.067 1.964.067.447 0 .97-.01 1.57-.033zM29.32 21.756c0 1.9-.628 3.342-1.883 4.326-1.173.905-2.805 1.357-4.895 1.357-.176 0-.57-.016-1.187-.05a28.096 28.096 0 0 0-1.425-.05c-.447 0-.945.022-1.49.067-.234.022-.351-.075-.351-.288 0-.145.117-.226.352-.248.536-.056.804-.347.804-.875v-7.837c0-.297-.058-.495-.178-.598-.101-.081-.316-.16-.649-.23-.28-.055-.447-.1-.508-.139-.059-.036-.095-.12-.106-.246-.017-.129.042-.215.173-.251a5.73 5.73 0 0 1 .358-.034c1.173-.078 2.73-.117 4.666-.117 1.883 0 3.397.452 4.543 1.358 1.184.939 1.777 2.224 1.777 3.855zm-1.71.221c0-3.166-1.625-4.747-4.878-4.747h-1.145c-.601.056-.9.22-.9.5v7.597c0 .534.143.891.425 1.07.285.182.852.271 1.704.271 3.197 0 4.795-1.564 4.795-4.69zM43.305 16.78c0 .12-.03.207-.09.254-.06.05-.206.11-.441.182-.285.087-.604.461-.958 1.12-1.325 2.479-2.677 5.418-4.054 8.818-.093.235-.297.392-.607.47a.262.262 0 0 1-.05.017c-.126 0-.232-.165-.319-.492-.179-.682-.723-2.003-1.631-3.962-.906-1.959-1.772-3.674-2.599-5.144-.282-.511-.668-.819-1.154-.916-.268-.053-.402-.135-.402-.238 0-.254.117-.366.352-.338 1 .11 2.168.062 3.506-.145.196-.031.319-.042.366-.031.09.028.132.12.132.28 0 .125-.14.24-.417.337-.544.202-.818.414-.818.635 0 .092.033.204.098.335.558 1.093 1.628 3.467 3.207 7.122.053.12.106.179.154.179.045 0 .092-.059.148-.179a598.89 598.89 0 0 1 3.018-6.773.963.963 0 0 0 .08-.36c0-.344-.33-.629-.989-.858-.245-.086-.363-.215-.351-.383.016-.19.195-.262.539-.218 1.087.132 2.056.143 2.911.034.246-.034.369.05.369.254M49.374 16.755c0 .137-.146.249-.44.335-.656.193-.985.45-.985.766v7.963c0 .514.301.824.908.933.299.053.45.16.45.319 0 .134-.026.22-.079.251-.05.034-.193.045-.422.034-1.439-.06-2.553-.06-3.338 0-.202.016-.32-.023-.353-.115a.678.678 0 0 1-.016-.173c0-.112.123-.193.369-.249.458-.103.723-.179.793-.22.176-.11.263-.333.263-.671v-8.033c0-.453-.308-.73-.922-.835-.257-.042-.386-.12-.386-.235 0-.157.02-.252.062-.288.041-.036.136-.045.29-.028 1.065.112 2.163.104 3.297-.028.215-.025.338-.033.377-.022.087.028.132.125.132.296M58.949 24.489c0 .922-.338 1.66-1.014 2.215-.705.579-1.668.87-2.89.87-1.609 0-2.553-.297-2.83-.892-.17-.36-.338-.818-.508-1.374-.07-.257-.02-.425.156-.5.218-.098.388-.056.514.13.464.688.93 1.174 1.4 1.465.453.277.984.416 1.59.416 1.517 0 2.274-.606 2.274-1.816 0-.475-.167-.88-.5-1.212-.321-.31-.989-.741-1.998-1.286-1.28-.687-2.12-1.227-2.523-1.62-.497-.486-.746-1.087-.746-1.803 0-.757.319-1.402.953-1.939.637-.533 1.447-.801 2.437-.801.698 0 1.377.086 2.036.262.506.137.794.31.858.523.137.444.226.989.271 1.637.011.235-.067.366-.237.394-.213.033-.364-.042-.45-.221-.338-.682-.724-1.162-1.154-1.439-.4-.257-.92-.385-1.565-.385-.573 0-1.025.134-1.358.402-.332.266-.5.645-.5 1.137 0 .458.165.852.492 1.188.31.31.886.676 1.721 1.095 1.288.645 2.177 1.19 2.663 1.637.606.55.908 1.19.908 1.917M73.098 21.94c0 1.58-.584 2.915-1.752 4.013-1.146 1.081-2.523 1.62-4.133 1.62-1.692 0-3.095-.508-4.216-1.522-1.145-1.048-1.718-2.4-1.718-4.06 0-1.607.581-2.953 1.744-4.046 1.145-1.07 2.542-1.603 4.19-1.603 1.68 0 3.077.522 4.192 1.564 1.128 1.06 1.693 2.403 1.693 4.035zm-1.66.283c0-1.587-.433-2.844-1.302-3.766-.835-.886-1.939-1.328-3.308-1.328-1.134 0-2.068.42-2.797 1.258-.729.838-1.092 1.928-1.092 3.272 0 1.612.422 2.877 1.268 3.8.824.896 1.945 1.343 3.359 1.343 1.14 0 2.07-.419 2.79-1.26.722-.84 1.082-1.947 1.082-3.32zM84.886 27.353c.006.126-.1.187-.319.187-1.958 0-3.808-1.676-5.549-5.03l-1.072.051v3.431c0 .257.06.428.187.512.126.083.405.159.838.226.299.047.45.156.45.321 0 .137-.025.22-.073.254-.05.034-.187.045-.41.034a28.55 28.55 0 0 0-3.239.061c-.235.014-.352-.08-.352-.284 0-.143.117-.224.352-.246.537-.054.805-.347.805-.875v-7.84c0-.52-.302-.838-.908-.958-.3-.06-.45-.154-.45-.285 0-.201.1-.302.302-.302.061 0 .125.005.198.017.224.033.564.05 1.023.05.153 0 .536-.008 1.153-.025.618-.017 1.19-.025 1.719-.025 1.092 0 1.956.204 2.587.614.71.453 1.065 1.12 1.065 2.004 0 1.511-.872 2.511-2.615 2.998.555 1.265 1.21 2.35 1.96 3.255.77.927 1.462 1.441 2.077 1.54.17.027.26.13.27.315zM81.6 19.437c0-.807-.207-1.383-.623-1.726-.413-.344-1.079-.514-1.992-.514-.408 0-.685.056-.827.167-.143.112-.212.352-.212.724v3.853c1.32-.045 2.271-.277 2.852-.696.534-.385.802-.989.802-1.808zM93.55 24.489c0 .922-.338 1.66-1.014 2.215-.704.579-1.668.87-2.889.87-1.61 0-2.554-.297-2.83-.892-.17-.36-.338-.818-.509-1.374-.07-.257-.02-.425.156-.5.218-.098.389-.056.515.13.463.688.93 1.174 1.4 1.465.452.277.983.416 1.59.416 1.516 0 2.274-.606 2.274-1.816 0-.475-.168-.88-.5-1.212-.322-.31-.99-.741-1.998-1.286-1.28-.687-2.12-1.227-2.523-1.62-.498-.486-.746-1.087-.746-1.803 0-.757.318-1.402.953-1.939.637-.533 1.447-.801 2.436-.801.698 0 1.377.086 2.037.262.505.137.793.31.858.523.136.444.226.989.27 1.637.012.235-.067.366-.237.394-.212.033-.363-.042-.45-.221-.338-.682-.723-1.162-1.154-1.439-.4-.257-.919-.385-1.564-.385-.573 0-1.026.134-1.358.402-.333.266-.5.645-.5 1.137 0 .458.164.852.491 1.188.31.31.886.676 1.721 1.095 1.289.645 2.177 1.19 2.663 1.637.606.55.908 1.19.908 1.917" />
</g>
</svg>
</Link>
<ul className="h-90px max-h-400px mt-8 mr-12 p-0 list-none float-right block">
<li className="float-left ml-0.5 list-none px-2">
<Link
to="/services/"
className="text-white hover:text-pink-200 uppercase text-lg leading-100 py-0 px-12px inline-block no-underline transition-all duration-300 ease-in delay-0"
style={{fontFamily: 'EB Garamond, serif'}}
>
Services
</Link>
</li>
<li className="float-left ml-0.5 list-none px-2">
<Link
to="/about/"
className="text-white hover:text-pink-200 uppercase text-lg leading-100 py-0 px-12px inline-block no-underline transition-all duration-300 ease-in delay-0"
style={{fontFamily: 'EB Garamond, serif'}}
>
About Us
</Link>
</li>
<li className="float-left ml-0.5 list-none px-2">
<Link
to="/news/"
className="text-white hover:text-pink-200 uppercase text-lg leading-100 py-0 px-12px inline-block no-underline transition-all duration-300 ease-in delay-0"
style={{fontFamily: 'EB Garamond, serif'}}
>
News
</Link>
</li>
<li className="float-left ml-0.5 list-none px-2">
<Link
to="/contact/"
className="text-white hover:text-pink-200 uppercase text-lg leading-100 py-0 px-12px inline-block no-underline transition-all duration-300 ease-in delay-0"
style={{fontFamily: 'EB Garamond, serif'}}
>
Contact
</Link>
</li>
</ul>
</div>
</div>
</div>
</header>
);
}
export default Header;
Note: to cleanup your code, in order to inline SVG assets I would strongly recommend: Import SVG as a component in Gatsby
The idea is quite simple, the previous hook calculates the scroll position and triggers the effect in your <Header> component, holding the current scroll position in the state ([scroll, setScroll]). At this point, you only need to change the <header> class name based on the value of the scroll using a template literal (${scroll > 150 ? 'someClass' : ''}).
来源：https://stackoverflow.com/questions/66095185/how-to-add-a-scroll-event-to-a-header-in-gatsby