¿Es posible cambiar el color de fondo de mi sitio web cuando un div específico está en la ventana gráfica? ¿Y sería posible cambiar el color de fondo nuevamente (es decir, por segunda vez) si hay otro DIV en la ventana gráfica?
Así que algo como esto:
AZUL AZUL AZUL ... DIV1 (en la ventana gráfica = color de fondo ROJO) ROJO ROJO ROJO ... DIV2 (en la ventana gráfica = color de fondo AZUL) AZUL AZUL AZUL
¡Muchas gracias de antemano!
Explicación
"Cuando el usuario se desplaza a la PARTE SUPERIOR del div azul, el color de fondo del cuerpo cambia a rojo".
$(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= $('#blue').offset().top) { $('body').css('background-color', 'red'); } if (scroll >= $('#black').offset().top) { $('body').css('background-color', 'blue'); } if (scroll >= $('#black').last().offset().top) { $('body').css('background-color', 'green'); } }); #blue { width: 400px; height: 800px; background: blue; } #black { width: 400px; height: 800px; background: black; } #red { width: 400px; height: 800px; background: red; margin-bottom: 500px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="blue"></div> <div id="black"></div> <div id="red"></div>siempre puede llamar a eso en la consulta de medios para cambiar cualquier cosa que desee a una altura o color en particular. Aquí hay un ejemplo si lo entiendo bien.
body {background-color:gray;} .mygridboxes { display:grid; } .box { height:500px; width:500px; background-color:red; font-size:50px; text-align:center; margin:0 auto; border:10px solid white; } @media only screen and (max-width:1024px){ body { background-color:yellow; } .box { background-color:green;//change background height:350px; //resize height width:350px;} } @media only screen and (max-width:768px){ body { background-color:yellow; } .box { background-color:green;//change background height:300px; //resize height width:300px;} } @media only screen and (max-width:479px){ body {background-color:blue;} .box { background-color:pink;//change background height:200px; //resize the height here width:200px; } } <body> <h1>RESIZE ME</h1> <div class="mygridboxes"> <div class="box">A</div> <div class="box">B</div> <div class="box">C</div> <div class="box">D</div> </div> </body>