Блог

Здравствуйте, ребята, у меня возникла проблема с отображением навигационной панели, чтобы она была прозрачной при первой загрузке страницы, но при первой загрузке я получаю белый цвет фона. Я хочу, чтобы моя навигационная панель была прозрачной, тогда, если я немного прокрутю страницу вниз, она станет белой на заднем плане. Мой код в моей навигационной панели приведен ниже.

 import React,{useState,useEffect} from 'react';
import {Link} from 'react-router-dom';
import {motion} from 'framer-motion';

const showNavVariant = {
    hidden: {
        y:-500
    },
    visible: {
        y:0,
        transition: {
            type:'spring',
            stiffness:30
        } 
    }
}

const Navbar = () => {

    const [changeColor,setChangeColor] = useState(false);

    useEffect(() => {
        window.addEventListener('scroll',() => {
            if(window.scrollY === 0) {
                setChangeColor(true);
                console.log('Transparent')
            } else {
                setChangeColor(false);
                console.log('Colored');
            }
        });
    },[changeColor])
   

    return (
        <motion.nav className={changeColor ? 'flex justify-center bg-transparent w-full shadow-xl fixed text-gray-100 z-50' : 'flex justify-center bg-gray-100 h-16 opacity-90 w-full shadow-xl fixed z-50' }
        variants={showNavVariant}
        initial="hidden"
        animate="visible"
        >
            <div className="max-w-7xl w-full flex justify-between items-center px-5">

                <div className={changeColor ? "border-2 border-gray-100 text-gray-100 rounded p-5 m-2 ml-20" : "border-2 border-gray-800 rounded p-3 m-2 ml-20 text-gray-700"}>
                    <h1 className="font-bold">Milktea</h1>
                </div>

                <div className={changeColor ? "grid grid-rows-2" : "grid grid-rows-1"}>
                    <div className={changeColor ? 'flex justify-end px-20 py-4' : 'px-20 py-4 hidden'}>
                        <div className="flex px-10">
                            <svg className="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" /><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                            </svg>
                            <p className="text-yellow-500 ml-3 cursor-pointer">milkteashop@gmail.com</p>
                        </div>
                        <div className="grid grid-cols-2 gap-5 justify-items-center self-center text-gray-400">
                            <Link to="#" className="fa fa-facebook"></Link>
                            <Link to="#" className="fa fa-instagram"></Link>
                        </div>
                    </div>

                    <ul className="grid grid-cols-5 justify-items-center gap-5 px-10">
                        <Link className="navBtn" to="/">
                            <li>Home</li>
                        </Link>
                        <Link className="navBtn" to="/products">
                            <li>Products</li>
                        </Link>
                        <Link className="navBtn" to="/locations">
                            <li>Locations</li>
                        </Link>
                        <Link className="navBtn" to="/franchise">
                            <li>Franchise</li>
                        </Link>
                        <Link className="navBtn" to="#contact-us">
                            <li>Contact Us</li>
                        </Link>
                    </ul>
                </div>
            </div>
        </motion.nav>
    )
}

export default Navbar

 

Ваше начальное значение установлено как false,

 const [changeColor,setChangeColor] = useState(false);
 

Измените значение false на true, чтобы условие было истинным, и ваш прозрачный класс будет применен.