滚动跟随小广告

  * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 50px;
            height: 200px;
            background-color: red;
            position: absolute;
            right: 30px;
            bottom: 40px;
            /* transition: .4s; */
        }

        body {
            width: 100%;
            height: 3000px;
        }

<div class="box"></div>

   //跟随小广告
        //思路:文档卷入多少,小广告距离顶部的距离就增加多少
        var box = document.querySelector('.box')
        //先获取初始位置
        var start =box.offsetTop
        window.onscroll=function(){
            // box.style.top=start+window.pageYOffset+'px';
            huandong(start+window.pageYOffset,box)
        }


        function huandong (target,el){
            if(el.timer){
                clearInterval(el.timer)
            }
            var start=el.offsetTop
            if(start==target){
                return
            }
            el.timer=setInterval(function(){
                var step=(target-start)/10
                if(Math.abs(step)<1){
                    step=step>0?1:Math.floor(step)
                }

                el.style.top=start+step+'px'
                if(start+step==target){
                    clearInterval(el.timer)
                    el.timer=null
                }
            },16.7)
        }