.descubremas{color:#260744;background:#eab308;border-radius:50px;font-family:Poppins;box-shadow:0 0 8px yellow!important;border:none;font-size:18px}.descubremas:hover{color:#eab308;border:2px solid #eab308!important;box-shadow:0 0 8px yellow;background:#fffe97!important}.vercursos{color:#eab308;background:#260744;border-radius:50px!important;font-family:Poppins;box-shadow:0 0 8px yellow!important;border:none}.vercursos:hover{color:#eab308;border:2px solid #eab308!important;box-shadow:0 0 8px yellow;border-radius:50px!important;background:#fffe97!important}.hero-graphics{display:flex;justify-content:center;align-items:center;width:100%;height:100%}Viewed Navbar.jsx:1-39
Viewed Navbar.css:1-70
Para lograr ese efecto tan fluido **se usan ambos,CSS y JavaScript,trabajando en equipo**. JavaScript se encarga de "detectar" el movimiento y CSS se encarga de la parte "visual" y la animación. Así es exactamente como está estructurado en tu proyecto:### 1. La lógica con JavaScript (React)
En el archivo `Navbar.jsx`,usamos un *Listener* para estar atentos a cuando el usuario hace scroll hacia abajo. Si el usuario baja más de 50 píxeles,JavaScript le agrega dinámicamente la clase `scrolled` a la etiqueta de navegación.
```javascript
// Detecta el scroll
const [scrolled,setScrolled]=useState(false);useEffect(()=>{const handleScroll=()=>{// Si baja más de 50px,"scrolled" se vuelve verdadero
setScrolled(window.scrollY>50)};window.addEventListener('scroll',handleScroll);return ()=>window.removeEventListener('scroll',handleScroll)},[]);// Si es verdadero,le agrega la clase CSS "scrolled"
return (```
### 2. El estilo y la transición con CSS
En `Navbar.css`,preparamos las dos apariencias (el antes y el después de hacer scroll). El truco para que no cambie de golpe y se vea brusco,sino suave,es la propiedad `transition:all 0.4s ease;`.
```css
.navbar{background:transparent;padding:1.5rem 0;transition:all 0.4s ease}.navbar.scrolled{background:rgba(30,5,58,0.9);backdrop-filter:blur(10px);padding:1rem 0;box-shadow:0 4px 20px rgba(0,0,0,0.5)}