Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

192
Vistas
¿Cómo puedo arreglar mis imágenes mientras me desplazo hacia abajo? Aparece en la parte superior de la barra de navegación mientras que los textos no están

Esta es la imagen . Este es el script Java que usé para cambiar el color de fondo cuando me desplacé hacia abajo. Pero aquí, el color de fondo cambia cuando me desplazo hacia abajo, pero hay otro problema de imagen frente a la barra de navegación cuando me desplazo hacia abajo.

 window.onscroll = function() {scrollFunction()}; function scrollFunction() { if(document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) { document.getElementById("navbar").style.background = "black" ; // document.getElementsByClassName("img").style.z-index = "-1" ; } else{ document.getElementById("navbar").style.background = "transparent"; } }

Aquí quiero que la imagen esté en la parte posterior de la barra de navegación cuando me desplace hacia abajo y cuando cambie el color de fondo. Este es el CSS que he usado.

 #navbar{ align-items: center; display: flex; top: 0px; position: sticky; background: transparent; } #service-container{ display: grid; padding: 30px; width: 96%; height: 100%; background-image: linear-gradient(to bottom right,rgb(255, 255, 255),rgb(226, 162, 194),rgb(196, 113, 154),rgb(248, 138, 193)); z-index: -1; } #service-container .h-primary2{ margin: 15px 43px; padding: 50px; font-family: 'Libre Baskerville', serif; text-align: center; font-weight:900; } #services{ font-family: 'Libre Baskerville', serif; } .columns img{ width: 50%; height: 50%; } div .from-right{ float: right; text-align: center; grid-column: 3/4; transform: translateX(50%); } div .from-left{ float: left; text-align: center; grid-column: 2/3; transform: translateX(-50%); }

aquí solo las imágenes aparecen delante de la barra de navegación, pero el contenido del texto está detrás de la barra de navegación, lo cual está bien.
Esta es una gran pregunta, pero ayúdenme, he intentado algunas cosas que no funcionan. Este es el mismo problema con la sección de inicio donde tengo los botones INICIAR SESIÓN y REGISTRARSE que se encuentran frente a la barra de navegación.

** COMO todavía estoy aprendiendo javascript y en realidad no sé qué cambios hacer. Espero haber tratado de explicar el problema claramente **

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

fijar la posición de la imagen debajo de la barra de navegación o en la propia barra de navegación

about 4 years ago · Juan Pablo Isaza Denunciar

0

Puede establecer el z-index de la barra de navegación.

Artículo de W3Schools

Por ejemplo:

 #navbar { z-index: 999; }

La barra de navegación ahora se muestra encima de cualquier cosa con un z-index debajo de 999.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda