0

Alguien sabe como puedo cambiar el estilo a un elemento al llegar a una posicion o etiqueta del body ? Lo quiero hacer con un navbar de color negro que cuando llegue a una posicion cambie a color blanco. Que sea responsive tambien.

index.html

        <div class="navbar">
            <ul>
                <li><a href="#inicio">Inicio</a></li>
                <li><a href="#sobremi">Sobre mi</a></li>
                <li><a href="#habilidades">Habilidades</a></li>
                <li><a href="#proyectos">Proyectos</a></li>
            </ul>
        </div>
        <div class="main">
            <div id="inicio"></div>
            <div id="sobremi"></div>
            <div id="habilidades"></div>
            <div id="proyectos"></div>
        </div>
5
  • ¿Quieres que al hacer scroll, el background del div cambie de color?
    – Emma Gr
    el 9 feb. 2022 a las 4:12
  • Con javascript puedes manipular los elementos del DOM y modificar las propiedades de los elementos html con css
    – Michael
    el 9 feb. 2022 a las 5:02
  • 1
    Pista rápida: Podría servirte IntersectionObserver.
    – padaleiana
    el 9 feb. 2022 a las 10:15
  • Muchas gracias padaleiana, le eché un ojo y creo que me puede servir👍 el 10 feb. 2022 a las 21:07
  • 1
    @padaleiana ya lo logre hacer → es.stackoverflow.com/a/517013/237951 el 24 feb. 2022 a las 20:17

2 respuestas 2

0

No se si he entendido bien lo que quieres hacer, pero creo que quieres hacer que el color de tu menú <nav></nav> cambie en base al color de fondo que tienes aplicado en ese momento. No se si esto se puede hacer, pero te dejo con una posible solución:

<script>
    //Activamos un addEventListener de Scroll en el contenedor "main"
    let main = document.querySelector(".main");
    main.addEventListener("scroll",()=>{
        //En scrollTop estoy obteniendo la posición de la página en al cual me situo
        //console.log(main.scrollTop); para verlo más claro
        scrollDiff(main.scrollTop);
    })
 
 function scrollDiff(scrollPos){
     //Anchors de tu navBar
    let navbar = document.querySelectorAll(".navbar ul li a");
    //Borde de el listado
    let navbarBorder = document.querySelector(".navbar ul");
    //Recorremos el nodeList de todos los elementos del menú
    navbar.forEach(attribute=>{
        if(scrollPos <= 855){
            //Aquí tienes el fondo verde
            attribute.style.color = "black";
            navbarBorder.style.borderColor = "black";
        }else if(scrollPos > 856 && scrollPos <=1787){
            //Aquí tienes el fondo blanco
            attribute.style.color = "green";
            navbarBorder.style.borderColor = "green";
        }else if(scrollPos > 1789 && scrollPos <= 2725){
             //Aquí tienes el fondo azul
             attribute.style.color = "aquamarine";
             navbarBorder.style.borderColor = "aquamarine";
        }else if(scrollPos >2726 && scrollPos <= 2799){
            //Aquí tienes el fondo negro
             attribute.style.color = "white";
             navbarBorder.style.borderColor = "white";
        }else{
            //Vuelve a un color por defecto
            attribute.style.color = "black";
            navbarBorder.style.borderColor = "black";
        }
    });
  
 }
</script>

Mediante JavaScript puedes determinar la posición en la que te encuentras de la página por el scroll, puedes hacer que si te encuentras en ciertas posiciones le apliques un color o otro al menú, aunque esta manera no es demasiado buena, si quieres hacer la página responsive este método no es el más adecuado.

1
  • Si lo mismo quería hacer pero no me sirve porque quiero que sea responsive. Pero Gracias igual por tomarte el tiempo👍. el 10 feb. 2022 a las 4:44
0

Lo logre obteniendo la distancia del top del elemento donde quiero que cambie y cuando el scroll llegue a esa distancia cambie de color:

document.addEventListener(
    "scroll",
    (e) => {
        if (
            document.querySelector(".main").scrollTop >=
            document.querySelector("#proyectos").offsetTop
        ) {
            document.querySelector("nav > ul").style.border = "#fff solid 2px";
            document.querySelectorAll("nav a").forEach((e) => {
                e.classList.add("navdark");
            });
        } else {
            document.querySelector("nav > ul").style.border = "#111 solid 2px";
            document.querySelectorAll("nav a").forEach((e) => {
                e.classList.remove("navdark");
            });
        }
    },
    true
);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.