Css - 如果它到达屏幕上的某个位置，如何更改元素大小？

Question

I've dynamically created some divs with random color who are scattered over the page randomly. I want to use css to give them a condition that says that if the div is located above let's say 600px on the screen - his size will change. I know the "if" statement for css is @media but I didn't figure how to use it right in this situation. Can you help me?

Example of a div (they all have the same class - "frog")

<div id="frog" class="fas fa-ad" style="width: 66px; height: 66px; 
background-color: rgb(87, 58, 55); position: absolute; left: 312px; top: 
93px; display: block;"></div>

Answer 1

You can't do that with CSS only. The only way you can have dynamic styling based on what happens in the windows in CSS is to use media queries. However, the docs precise that you can only detect window-level data , like the device width, or whether the page is displayed on a screen or on a printed paper, etc.

You'll have to change your style with JS. This is often a bad way to have dynamic styling, because the only way to do so is to 'probe' the DOM (using for example setInterval ). Luckily your case is an exception - since you update your divs position with JS, you can check directly after that the position of your divs, and update your styles accordingly!

Example using the very useful getBoundingClientRect :

 // select the frog element let frog = document.getElementById('frog'); let count = 0; setInterval(() => { // update the frog position frog.style.top = `${count}px`; count = (count+2)%200; // check if the frog is after 100px from the top of the window if (frog.getBoundingClientRect().top>100) { frog.className = 'over-100'; } else { frog.className = ''; } }, 1000/30); 

 #frog { position: fixed; top: 0; left: 0; width: 50px; height: 50px; background-color: green; } #frog.over-100 { background-color: olive; } 

 <div id="frog"></div>