随滚动条的下拉和上拉元素实时变化，不知怎么实时改变scale

圆形的元素随滚动条下拉实时渐变缩小，一直到导航条固定时停止缩小;当滚动条上拉到导航条没有固定时渐变放大到原来的大小

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .fixed{
            position: fixed;
            top: 0;
        }
    </style>
</head>
<body>


<div style="height:200px;background-color:#EFE4B0;"></div>




<div id="fixed" style="height:40px;width:100%;background-color:#7092BE;color:#fff;z-index:999;">这个div到达顶部时悬浮在顶部，不到顶部不悬浮</div>





<div style="height:2000px;background-color:#C3C3C3;">
    <div style="height:300px;background-color:#E6F8AE;">
        <div id="avatar" style="height:100px;width:100px;border-radius:50%;background-color:#99D9EA;-webkit-transform: scale(1);z-index:-1">

        </div>
    </div>
</div>





<script type="text/javascript">
    var fixedDom = document.getElementById('fixed');
    var fixedTop = fixedDom.offsetTop;
    var bodyDom = document.body;
    window.addEventListener('scroll',function(){
        fixedDom.classList[fixedTop - bodyDom.scrollTop < 1 ? 'add' : 'remove']('fixed');
    });
    </script>


</body>
</html>

<script type="text/javascript">
    var fixedDom = document.getElementById('fixed');
    var fixedTop = fixedDom.offsetTop;
    var bodyDom = document.body;
    var avatarDom = document.getElementById('avatar');
    avatarDom.style.transformOrigin = '50% 0';
    window.addEventListener('scroll',function(){
        var scale = bodyDom.scrollTop/fixedTop;
        if(scale < 1){
            scale = 1- scale*.5;
            avatarDom.style.transform = 'scale('+scale+','+scale+')';
            fixedDom.classList.remove('fixed');
        }else{
            fixedDom.classList.add('fixed');
        }
    });
</script>

【热门文章】