Navbar元素的动态颜色变化NextJS

这是一个酒店网站导航栏的代码，我想让导航栏元素的颜色根据固定导航栏所在的背景动态变化，即。例如，如果第一个屏幕是暗的，元素采用白色颜色#fff，我们向下滚动，或者切换到另一个页面（/lodge），其中背景已经是白色，导航栏元素应该将颜色更改为更暗的#313131，以免与背景颜色合并。
希望对您有所帮助，我想知道这样的功能如何才能实现？也许有一些方法可以根据导航栏元素后面的背景反转颜色？

Codesandbox.io

'use client';

import Image from "next/image";
import Link from "next/link";

const Navbar = () => {

  return (
    <div className="fixed w-full backdrop-blur-sm z-10 lg:px-[100px] md:px-[70px] sm:px-[35px] xs:px-[15px]">
        <div className="border-b-[2px] border-[#313131]">
            <div className="lg:pb-5 lg:pt-7 md:pb-5 md:pt-6 sm:pt-5 sm:pb-4 xs:pt-10 xs:pb-[10px]">
                <div className="flex flex-row items-center">

                    {/* logo */}
                    <div className="relative lg:w-[146px] lg:h-[64px] md:w-[132px] md:h-[58px] sm:w-[90px] sm:h-[50px] xs:w-[68px] xs:h-[30px]">
                        <Link href="/">
                            <Image
                                src="/images/navbar/logo-b.svg" 
                                alt="logo-b" 
                                layout="fill"
                            />
                        </Link>
                    </div>
                    
                    {/* lodge */}
                    <div className="lg:text-[28px] md:text-[24px] lg:block md:block sm:hidden xs:hidden font-medium leading-normal uppercase text-[#313131] lg:pl-[610px] md:pl-[284px] lg:pr-[80px] md:pr-[80px]">
                        <Link href="/lodge">
                            LODGE
                        </Link>
                    </div>

                    {/* our blog */}
                    <div className="lg:text-[28px] md:text-[24px] md:block sm:hidden xs:hidden font-medium leading-normal uppercase text-[#313131]">
                        <Link href="/#ourblog">
                            OUR BLOG
                        </Link>
                    </div>

                    {/* num */}
                    <div className="flex flex-row items-center lg:gap-5 md:gap-5 sm:gap-3 lg:pl-[100px] md:pl-[80px] sm:pl-[162px]">
                        <div className="relative lg:w-[24px] lg:h-[24px] md:w-[24px] md:h-[24px] sm:w-[20px] sm:h-[20px] lg:block md:block sm:block xs:hidden">
                            <Image 
                                src="/images/navbar/tel-b.svg" 
                                alt="tel" 
                                layout="fill"
                            />
                        </div>
                        <div className="lg:text-[28px] md:text-[24px] sm:text-[20px] font-medium leading-normal uppercase text-[#313131] lg:block md:block sm:block xs:hidden">
                            +57 (316) 893-1653
                        </div>
                    </div>
                    
                    {/* lang switch */}
                    <div className="lg:text-[28px] md:text-[24px] sm:text-[20px] font-medium leading-normal uppercase text-[#313131] lg:pl-[100px] md:pl-[132px] sm:pl-[50px] xs:pl-[139px]">
                        <div className="flex flex-row items-center">
                            <div className="cursor-pointer underline">
                                EN
                            </div>
                            <div className="lg:px-4 md:px-[15px] sm:px-[10px] xs:px-[10px] cursor-default">
                                |
                            </div>
                            <div className="cursor-pointer">
                                ES
                            </div>
                        </div>
                    </div>

                    <div className="lg:hidden md:hidden sm:block xs:block sm:pl-[60px] xs:pl-[30px]">
                        <Image
                            className="cursor-pointer"
                            src="/images/navbar/burger_menu_b.svg"
                            alt="burger menu"
                            width={24}
                            height={24}                        
                        />

                        {/* <BurgerMenu onClose={() => setShowBurgerMenu(false)} /> */}
                    </div>

                </div>
            </div>
        </div>
    </div>
  )
}

export default Navbar;

我试着通过滚动条上的useRouter和window.addEventListener来实现这一点（滚动条上的颜色上下变化一定的px），但是这种方法有延迟（当切换到另一个页面时，颜色不会立即更新，而是在滚动操作之后），我意识到这不是最好的方法，因为它也增加了自适应设计的工作量。

要根据背景动态更改导航栏元素的颜色，可以使用Intersection Observer API，类似于：

创建一个函数来处理相交观察点

const handleIntersection = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // Set the Navbar color for dark background
      // Set the color to #fff for example
    } else {
      // Set the Navbar color for light background
      // Set the color to #313131 for example
    }
  });
};

初始化交点观察点

useEffect(() => {
  const observer = new IntersectionObserver(handleIntersection, {
    threshold: 0.5, // Adjust as needed
  });

  const targetElement = document.getElementById("targetElementId"); // Replace with your target element's ID

  if (targetElement) {
    observer.observe(targetElement);
  }

  return () => observer.disconnect(); // Cleanup observer on component unmount
}, []);

在JSX中，将ID应用于其背景决定导航栏颜色的元素。举例来说：

<div id="targetElementId" className="...">Content with changing background</div>

Navbar元素的动态颜色变化NextJS

1条答案

相关问题

热门标签

最新问答