JS 固定右側側邊欄案例

1.頁面滾動到一定位置.側邊欄改爲固定定位.
2.頁面繼續滾動,會讓返回頂部盒子顯示出來.

 <div class="boxs">
        <div class="boxo">放回頂部</div>
    </div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <script>
        var box1= document.querySelector('.box1');
        var boxs = document.querySelector('.boxs');
        var boxsTop = boxs.offsetTop;
        var box2 = document.querySelector('.box2');
        var box2Top = box2.offsetTop;
        var box3 = document.querySelector('.box3');
        var box3Top = box3.offsetTop;
        var boxo = boxs.querySelector('.boxo');
        //添加頁面滾動事件
        document.addEventListener('scroll',function(){
            if(window.pageYOffset >= box2Top){
                boxs.style.position = "fixed";
                boxs.style.top = boxsTop-box2Top +'px';
            }else{
                boxs.style.position = "absolute";
                boxs.style.top = '600px';
            }
            if(window.pageYOffset >= box3Top ){
                boxo.style.display = "block";
            }else{
                boxo.style.display = "none";

            }
        });
    </script>