Cómo hacer que un menú transparente pase a color al hacer scroll

  • EstherCoach

    (@esthercoach)


    hace 4 años, 8 meses

    Hola!

    De momento tengo un sticky header transparente pero al hacer scroll down, es algo confuso ya que se mezcla el texto del menú con el texto de las páginas.

    Me gustaría que al hacer scroll, el menú se convirtiera en algún color claro para evitar esa confusión.

    He estado mirando por ahí pero en cada sitio dan una solución diferente, ya que supongo que dependerá del tema que cada uno esté usando, entre otras cosas. Así que no sé ni por dónde empezar.

    Soy consciente de que he de añadir algo de CSS y JS, pero no sé exactamente dónde. Si alguien me puede ayudar, lo agradezco mucho.

    Uso el tema ASTRA y Elementor.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • Moderador LGrusin

    (@lgrusin)

    hace 4 años, 8 meses

    El tema Astra para la cabecera transparente permite cambiar los colores, le llama Color de superposición de fondo. Mira en las opciones del tema, en Colores y Fondo.

    Iniciador del debate EstherCoach

    (@esthercoach)

    hace 4 años, 8 meses

    Hola @lgrusin

    antes de nada, gracias por contestar.

    Tienes razón, ya era consciente de esto. Sin embargo, si le pongo un color desde ahí, la cabecera deja de ser transparente. He probado variables de esto y no hay forma. Lo que necesito es que pase de transparente a un color una vez el usuario empiece a hacer scroll down.

    Moderador LGrusin

    (@lgrusin)

    hace 4 años, 8 meses

    Fijate bien, si es posible poner el color del fondo transparente, hay un deslizante a la derecha del color para las transparencias.

    Ya sé que no es lo mismo pero lo decía para que escaparas de esa manera. Lo otro requiere javascript y añadirle una clase para modificar los estilos cuando se haga scroll. De todas formas te dejo un ejemplo
    https://codepen.io/chris_cook/pen/MJwpPj

    Iniciador del debate EstherCoach

    (@esthercoach)

    hace 4 años, 8 meses

    Aaah, claro. No, sí. Ya había probado esa solución por salir del paso, pero después lo pensé mejor y no me hace mucha gracia, ya que la parte superior de la página de inicio es grisácea mientras que el resto son medio azuladas.

    Pero nada, igualmente te agradezco la intención. Si al final no sé cómo arreglarlo, tendré que hacer algo de esta guisa.

    Voy a pasarme por ese enlace que me dejas, a ver si me aclara algo.

    Gracias!!

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • El debate ‘Cómo hacer que un menú transparente pase a color al hacer scroll’ está cerrado a nuevas respuestas.

Etiquetas