Por si acaso, es mi 1ª pregunta.
Tengo: menú de navegación con fondo transparente e intento cambiar el fondo cuando llego al borde superior de la ventana.
window.addEventListener("scroll", navSticky); function navSticky(){ let nav = document.getElementById('navbar'); let bounding = nav.getBoundingClientRect(); if(bounding.top <= 0 ){ nav.classList.add("sticky"); }else{ nav.classList.remove("sticky"); } } *{ margin: 0; text-align: center; } body{ background: lightgrey; } header h1{ padding: 40px; } nav{ position: sticky; top: 0; padding: 12px; background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,255,0, 0.5), rgba(255,0,0, 0.5), rgba(0,0,0,0)); color: black; } nav:before{ content: "now bg transparent"; } .container{ min-height: 1000px; padding: 20px; } nav.sticky{ background: linear-gradient(to right, rgb(0,255,0), rgb(255,0,0)); color: white; } nav.sticky:before{ content: "now bg isn't transparent"; } <body> <header> <h1>Header, that ask u to scroll page</h1> </header> <nav id="navbar"> </nav> <div class ="container"> When we scroll page, and nav reached top of screen, .sticky add to classList<br> </div> </body>Su trabajo, pero tengo varias preguntas:
¡Gracias!
La API le permite observar los elementos cuando entran o salen de la ventana gráfica. Lo hace lejos del hilo principal, por lo que no obtendrá ningún código de bloqueo de procesamiento.
En su caso específico, observe el elemento <header> . Cada vez que el elemento abandona la vista, es el mismo punto cuando la navbar de navegación se vuelve pegajosa. En la devolución de llamada, verifique si la propiedad isIntersecting es true o false . Esta propiedad indica si el elemento observado está (parcialmente) a la vista o no.
const header = document.querySelector('#header'); const nav = document.querySelector('#navbar'); const callback = ([entry]) => { const { isIntersecting } = entry; nav.classList.toggle('sticky', !isIntersecting); }; const options = { root: null, rootMargin: '0px', threshold: 0 }; const observer = new IntersectionObserver(callback, options); observer.observe(header); * { margin: 0; text-align: center; } body { background: lightgrey; } header h1 { padding: 40px; } nav { position: sticky; top: 0; padding: 12px; background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 255, 0, 0.5), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0)); color: black; } nav:before { content: "now bg transparent"; } .container { min-height: 1000px; padding: 20px; } nav.sticky { background: linear-gradient(to right, rgb(0, 255, 0), rgb(255, 0, 0)); color: white; } nav.sticky:before { content: "now bg isn't transparent"; } <body> <header id="header"> <h1>Header, that ask u to scroll page</h1> </header> <nav id="navbar"></nav> <div class="container"> When we scroll page, and nav reached top of screen, .sticky add to classList<br> </div> </body>