Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

198
Views
¿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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!