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 **
fijar la posición de la imagen debajo de la barra de navegación o en la propia barra de navegación
Puede establecer el z-index de la barra de navegación.
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.