js如何监听css的属性？

仿做了下爱淘宝刚进页面的顶部广告提示，我的思路是这样的，下面上滑的页面我用css的动画属性写，然后当页面上滑到指定的位置后（指定的top值），顶部会出现一栏新的广告，那么现在问题来了，js里如何动态监听css的属性，求各位大神帮帮忙，源代码在下面：

<!doctype html>



content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } .box{ width:100%; background-color:skyblue; } .box img.img1{ display:block; margin:0 auto; background:green } .box img.img2{ position:absolute; top:0; left:164px; display:none; } .layout{ width:100%; height:800px; background-color:pink; position:absolute; top:460px; animation:run 2s ease-in 1 forwards 1s; } @keyframes run{ 0%{ top:460px; } 100%{ top:90px; } }


falsefalse
window.onload=function() { var layout = document.querySelector(".layout"); var img = document.querySelector(".box .img2"); console.log(layout.offsetTop); if (layout.offsetTop === 90) { //js如何监听css属性的变化 img.style.display = "block"; } }


js有个滚轮事件，用这个写不用这么麻烦